「design」の検索結果

Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a figma.com design URL provided alongside a codebase. Encodes the workflow for reading a node out of Figma with get_design_context and adapting its reference output to the target project — reusing existing components, tokens, and conventions, and honoring Code Connect mappings, component docs, design annotations, and design tokens by priority. Complements figma-code-connect (component mapping) and figma-generate-design / figma-use (the reverse, code → design direction).

日本語の概要は準備中です。原文の説明を表示しています。

Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance. Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model. Also triggers when teams are inconsistent across products and a system is the answer.

日本語の概要は準備中です。原文の説明を表示しています。

Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models. Use whenever the user wants to design a page, feature, flow, slide deck, or brand-new product; improve or reproduce existing UI; compare design results across top models; explore visual variants; set or extract a design system; build reusable components or multi-page flows; create presentations; or create posters and marketing graphics, even if they never say the word 'design tool'. Also supports generating supporting image or video assets when a design needs them.

日本語の概要は準備中です。原文の説明を表示しています。

Design and prototype in Paper Design (app.paper.design) — read/write designs via MCP, convert to React/Tailwind code, import HTML/CSS, sync design tokens. Also covers Paper Shaders (@paper-design/shaders-react) — 30+ shader React components (mesh gradient, fluted glass, liquid metal, god rays, halftone, grain gradient, pulsing border). Pairs with minoan-frontend-design for creative direction. Triggers on Paper Design, paper.design, design-to-code, artboard, Paper Shaders, Paper MCP, prototype.

日本語の概要は準備中です。原文の説明を表示しています。

Use this skill whenever the user wants to use AI agents to work with Penpot design files via the Penpot MCP Server. Triggers include: using Penpot through an AI agent, design files, design systems, design tokens, Penpot MCP, design-to-code, generating UI from design, auditing a design system, creating components/variants, renaming layers, exporting assets from Penpot, adding flows, interactions, animations, overlays, or prototyping in Penpot, or prompting an AI agent to read/modify a Penpot file. Also triggers when the user wants to set up Penpot MCP, connect any MCP-compatible AI agent or IDE to Penpot, or produce production-ready HTML/CSS/React from a Penpot design. Use this skill for Penpot-agent workflows — design, code, audit, prototyping, or setup.

日本語の概要は準備中です。原文の説明を表示しています。

Sparkle Design の UI コンポーネントを shadcn registry 経由でプロジェクトに追加するスキル。 パッケージマネージャの自動検出、設定バリデーション、コンポーネントインストール、 Storybook 統合、CSS セットアップ、トラブルシューティングをカバーする。 「Sparkle コンポーネントを追加」「sparkle-design のコンポーネントをインストール」 「@sparkle-design のセットアップ」「コンポーネントをどう追加する」 「registry の設定」「components.json の設定」への言及で発動する。 English: "add a sparkle button", "install sparkle-design card", "add @sparkle-design/input", "set up components from sparkle registry", "how do I install components", "registry setup"

Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".

日本語の概要は準備中です。原文の説明を表示しています。

Audit a design against Dieter Rams' ten "Good design is..." principles, then hand off a /make-plan prompt for one of three outcomes — new design, refine design, or redesign. Use when the user says "audit this design", "design review", "check this UI against Rams", "is this UI good", "critique this design", "design audit", or asks for a critique that should lead to a plan.

日本語の概要は準備中です。原文の説明を表示しています。

Design scalable distributed systems using structured approaches for load balancing, caching, database scaling, and message queues. Use when the user mentions "system design", "scale this", "high availability", "rate limiter", "design a URL shortener", "design Twitter", "design Uber", "design a news feed", "system design interview", "capacity planning", or "distributed architecture". Also trigger when estimating infrastructure requirements, choosing between microservices and monoliths, or designing for millions of concurrent users. Covers common system designs (TinyURL, feeds, chat) and back-of-the-envelope estimation. For data fundamentals, see ddia-systems. For resilience, see release-it.

日本語の概要は準備中です。原文の説明を表示しています。

Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser automation and HTML inspection. Produces a semantic design system document optimised for consistent page generation. Triggers: 'extract design system', 'design system', 'create DESIGN.md', 'analyse the design', 'what design does this site use', 'extract styles from', 'reverse engineer the design'.

日本語の概要は準備中です。原文の説明を表示しています。

Apply production-grade design standards when building or reviewing pages, components, or UI. Use this skill whenever the user asks to build a page, design a component, lay out a section, review the UI, fix the layout, or check design quality. Triggers on build a page, create a component, design a section, hero, card, CTA, layout, review the UI, fix the design, design system, design tokens, spacing, typography scale, button standards, mobile design. Also triggers for any production design decision where contrast, accessibility, spacing, or visual hierarchy matters.

日本語の概要は準備中です。原文の説明を表示しています。

현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸 Claude Design (claude.ai/design)에 자동으로 전달해 디자인을 생성한 뒤 결과 링크를 터미널에 클릭 가능한 형태로 돌려주는 스킬. 터미널 한 번의 호출로 코드베이스 → Claude Design 컨텍스트 이관을 수행한다. claude.ai/design 은 사용자의 로그인된 Chrome(claude-in-chrome)으로 구동하되, 상호작용 레이어가 막히면(알려진 chrome-extension 충돌 버그) 깔끔하게 수동 핸드오프로 전환한다. 렌더링 스크린샷 캡처는 하지 않는다. 트리거: "/claude-design", "이 코드베이스를 클로드 디자인으로 옮겨줘", "코드베이스 분석해서 claude design에 전달", "랜딩 디자인 뽑아줘", "claude.ai/design에 보내줘", "클로드 디자인에 디자인 요청해줘", "이 레퍼런스로 디자인 만들어줘", "Claude Design에 시안 요청".

日本語の概要は準備中です。原文の説明を表示しています。

World-class level design expertise - spatial storytelling, player flow, blockout methodology, and the invisible hand that guides players without them knowingUse when "level design, blockout, graybox, whitebox, player flow, level layout, combat arena, exploration space, map design, multiplayer map, pacing, weenie, landmark, gating, metroidvania, open world design, linear level, environmental storytelling, teaching through design, playtesting, heatmap, metrics, sightlines, level-design, game-development, spatial-design, blockout, graybox, player-flow, pacing, environmental-storytelling, combat-design, multiplayer-maps, open-world, linear-design, metroidvania" mentioned.

日本語の概要は準備中です。原文の説明を表示しています。

One-time autonomous design context discovery. Scans the codebase to extract design tokens, typography, colors, spacing, brand patterns, and tech stack, then writes a Design Context section to CLAUDE.md. Zero questions asked. Use when: 'setup design', 'design context', 'design tokens', 'brand discovery', 'design system scan', 'initialize design', 'teach design'.

日本語の概要は準備中です。原文の説明を表示しています。

Audit a design against Dieter Rams' ten "Good design is..." principles, then hand off a /make-plan prompt for one of three outcomes — new design, refine design, or redesign. Use when the user says "audit this design", "design review", "check this UI against Rams", "is this UI good", "critique this design", "design audit", or asks for a critique that should lead to a plan.

日本語の概要は準備中です。原文の説明を表示しています。

ヒアリング駆動でデザイン仕様書（DESIGN.md）を作るスキル。 「コーポレートサイト作りたい」「LP のデザイン考えて」「ポートフォリオの世界観決めたい」 「ファンタジーゲームみたいな公式サイト作りたい」など、用途・雰囲気・世界観の相談時に使用。 静的 HTML クイズで意図を抽出し、Intent / Colors / Typography / Animations を含む DESIGN.md を生成。 既存 DESIGN.md からの HTML モック生成や、URL からの抽出には使用しない（後者は design-extractor の役割）。

Design finalization: generates production-quality Pretext-native HTML/CSS. Works with approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, design review context from /plan-design-review, or from scratch with a user description. Text actually reflows, heights are computed, layouts are dynamic. 30KB overhead, zero deps. Smart API routing: picks the right Pretext patterns for each design type. Use when: "finalize this design", "turn this into HTML", "build me a page", "implement this design", or after any planning skill. Proactively suggest when user has approved a design or has a plan ready. (gstack) Voice triggers (speech-to-text aliases): "build the design", "code the mockup", "make it real".

日本語の概要は準備中です。原文の説明を表示しています。

Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview pages. Creates DESIGN.md as your project's design source of truth. For existing sites, use /plan-design-review to infer the system instead. Use when asked to "design system", "brand guidelines", or "create DESIGN.md". Proactively suggest when starting a new project's UI with no existing design system or DESIGN.md. (gstack)

日本語の概要は準備中です。原文の説明を表示しています。

Generate archetype-driven semantic design tokens (colors, typography, spacing, radius, motion, elevation) that don't look vibecoded. Hard-bans Tailwind-default palettes, Inter-only typography, and purple→pink gradients unless the chosen archetype explicitly demands them. Load when the user asks to generate design tokens, create a design system, set up CSS custom properties, build a token scale, design a color system, set up typography scale, or when frontend-design routes here during token generation. Also triggers on "design tokens for", "token system", "CSS variables for design", "set up a theme", "build a design system foundation". Sub-skill of frontend-design. Always reads ARCHETYPE.md first.

日本語の概要は準備中です。原文の説明を表示しています。

Orchestrator + builder for distinctive, production-grade frontends that don't look AI-generated. Derives stack and design context from product-soul/PRD/specs, then runs the anti-slop chain — explore distinct directions, lock a DESIGN.md system, build from golden examples with mandatory polish + every interactive/empty/loading/error state, then review. Load when the user asks to build a UI, design a frontend, build a landing page or dashboard or web app, beautify or redesign a page, make a UI look premium/playful/editorial, says "build me a frontend", "make this not look AI-generated", "design this interface", "give this real polish", or "frontend design". Routes to design-direction, design-system, design-review.

日本語の概要は準備中です。原文の説明を表示しています。

Turn a chosen design direction into a canonical DESIGN.md plus production tokens that don't look vibecoded — state-level colors (8-step neutral ramp, rest/hover/active/ disabled, focus ring), APCA-checked contrast, typography, spacing/radius/motion/elevation, an icon strategy, and component contracts for the core atoms. Emits tokens in the project's stack format (shadcn HSL vars or Tailwind v4 @theme). Load when the user asks to build a design system, generate design tokens, create a DESIGN.md, set up a theme, design a color or type system, pick icons, or when frontend-design routes here. Replaces design-tokens-craft and icon-craft. Sub-skill of frontend-design. Reads DIRECTION.md first.

日本語の概要は準備中です。原文の説明を表示しています。

This skill should be used when the user wants to "stress-test a design", "challenge an idea", "red team a proposal", "get critical feedback on a design", "validate a design", "adversarial architecture review", "risk assessment", "設計を検証して", "反論をもらいたい", "設計を批判的にレビュー", "デビルズアドボケート", "ストレステスト", "弱点を指摘して", "穴を見つけて", "この設計で良いか", "リスク評価", "設計のアーキテクチャレビュー", or mentions structured adversarial review of a proposal or design. NOTE: Use this for validating PROPOSALS and DESIGNS through adversarial debate, NOT for generic code review, PR review, or normal review requests (use /codex:review or /codex:adversarial-review for those). Also NOT for investigating unknown bugs (use /agent-dialectics:strong-inference for that).

Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', or '/extract-design'.

日本語の概要は準備中です。原文の説明を表示しています。

Extract design tokens, text styles, and variables from a Figma design system and produce a design-tokens.json plus ready-to-use QML singletons. Use this skill whenever someone wants to pull their design system out of Figma — whether they say "export tokens from Figma", "get design tokens", "set up my design system", "read our Figma design system", "get Figma variables into QML", "pull our color palette from Figma", "import design tokens", "extract colors/typography/spacing from Figma", or similar. Trigger this skill at the start of any design-system workflow that involves a Figma source.

日本語の概要は準備中です。原文の説明を表示しています。