设计技能

Interview the user in rounds until no branch of the design tree stays open.

中文简介正在准备中。当前显示原文说明。

Claude Codeセッションの効率を分析・スコアリングするWebツール。セッションログ（JSONL）を解析し、7観点100点満点で「無駄の有無」を評価。npx session-evaluatorで起動し、ブラウザUIでセッション選択→分析→改善提案まで実行可能。

中文简介正在准备中。当前显示原文说明。

Implements SwiftUI Views from Figma designs using Figma MCP tools (figma:get_design_context, figma:get_screenshot, figma:get_variable_defs, figma:get_metadata). Splits large designs into appropriately-sized components, respects existing codebase conventions, and adds previews for each component. Use when implementing SwiftUI from Figma design URLs (e.g., figma.com/design/...), converting designs to code, or building iOS UI from Figma mockups. Do NOT call Figma MCP tools directly without reading this skill first.

中文简介正在准备中。当前显示原文说明。

Figma のワイヤーフレーム URL から仕様書一式を docs/ 配下に Markdown で抽出するスキル。ページ構成・ユースケース・アクター・データモデル・コンポーネントを 15 ステップで段階的に生成し、整合性／データモデル／コンポーネントの 3 レビューを作成する。**既存リポジトリの機能拡張モード** では既存モデル・ルーティング・ビューを再利用優先。**レビュー反復反映ステップ** では質問ループで方針を確定しドキュメントに反映する。Figma URL が提供されたとき、Figma デザインから実装用仕様書を作りたいとき、または既存仕様書の精度向上を求められたときに使用する。

中文简介正在准备中。当前显示原文说明。

Extract and analyze Figma designs to create structured design specifications. Use this skill when you need to analyze Figma nodes, extract design properties (layout, spacing, typography), classify components using Atomic Design principles, and generate design specification documents that can be used for implementation.

中文简介正在准备中。当前显示原文说明。

Jetpack ComposeでUIを実装する時に参照するコーディングガイドライン。 「Android UI」「Compose」「Jetpack」「画面実装」「UIコンポーネント」「レイアウト」と言われたら使う。 Android/Kotlin UI実装のベストプラクティス、アンチパターン、実装パターンを提供する。

中文简介正在准备中。当前显示原文说明。

Figmaデザインから高精度Jetpack Composeコードを生成するスキル。推測を排除し、Figma APIから正確な値を取得することで、95%以上の準拠率を実現。バイブコーディングを禁止し、Figma仕様に忠実な実装を保証する。

中文简介正在准备中。当前显示原文说明。

checklist の「UI 撮影台本」に沿って UI のスクリーンショットを撮影し、前後比較(compare.html)用の before / after 素材を保存する。「実装前の UI を撮っておいて」「after のスクショを撮って」などの依頼で発火する。

中文简介正在准备中。当前显示原文说明。

Create comprehensive technical design for a specification

中文简介正在准备中。当前显示原文说明。

Create complete specs (requirements, design, tasks) for all features in roadmap.md using parallel sub-agent dispatch by dependency wave.

中文简介正在准备中。当前显示原文说明。

Interactive technical design quality review and validation

中文简介正在准备中。当前显示原文说明。

Add descriptions for new models from the HuggingFace router to chat-ui configuration. Use when new models are released on the router and need descriptions added to prod.yaml and dev.yaml. Triggers on requests like "add new model descriptions", "update models from router", "sync models", or when explicitly invoking /add-model-descriptions.

中文简介正在准备中。当前显示原文说明。

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

中文简介正在准备中。当前显示原文说明。

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

中文简介正在准备中。当前显示原文说明。

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

中文简介正在准备中。当前显示原文说明。

54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.

中文简介正在准备中。当前显示原文说明。

Comprehensive end-to-end validation of the Archon Web UI using browser automation and codebase review. Use when: User wants to validate, test, or audit the Archon web interface, find UI/UX bugs, test workflow management, verify parallel agent orchestration, or run comprehensive browser-based E2E tests. Triggers: "validate ui", "test the ui", "e2e test", "browser test", "validate archon", "test archon ui", "ui audit", "ux review", "comprehensive test", "validate everything". Capability: Starts Archon, runs exhaustive browser automation tests via agent-browser CLI, performs codebase review, and produces a detailed bug/UX report. NOT for: Unit tests (use `bun test`), CLI-only validation (use /validation:validate-simple).

中文简介正在准备中。当前显示原文说明。

Domain-Driven Design architecture for claude-flow v3. Implements modular, bounded context architecture with clean separation of concerns and microkernel pattern.

中文简介正在准备中。当前显示原文说明。

1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.

中文简介正在准备中。当前显示原文说明。

Urdu-first digital experiences with native RTL support, Nastaliq typography, and bilingual Urdu/Latin harmony. For editorial, personal, and publication layouts.

中文简介正在准备中。当前显示原文说明。

Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.

中文简介正在准备中。当前显示原文说明。

Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.

中文简介正在准备中。当前显示原文说明。

Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.

中文简介正在准备中。当前显示原文说明。

Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.

中文简介正在准备中。当前显示原文说明。