Back to Details

frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

frontend-design

前端设计

Create distinctive, production-grade frontend interfaces.
打造独特的、生产级别的前端界面。

Context Files

上下文文件

  • $JAAN_CONTEXT_DIR/tech.md
    - Tech stack context (optional, auto-imported if exists)
    • Uses sections: 
      #current-stack
      , 
      #frameworks
      , 
      #constraints
  • $JAAN_CONTEXT_DIR/design.md
    - Design system guidelines (optional)
  • $JAAN_CONTEXT_DIR/brand.md
    - Brand guidelines (optional)
  • $JAAN_TEMPLATES_DIR/jaan-to:frontend-design.template.md
    - Output template
  • $JAAN_LEARN_DIR/jaan-to:frontend-design.learn.md
    - Past lessons (loaded in Pre-Execution)
  • ${CLAUDE_PLUGIN_ROOT}/docs/extending/language-protocol.md
    - Language resolution protocol
  • $JAAN_CONTEXT_DIR/tech.md
    - 技术栈上下文（可选，若存在则自动导入）
    • 使用的章节：
      #current-stack
      , 
      #frameworks
      , 
      #constraints
  • $JAAN_CONTEXT_DIR/design.md
    - 设计系统指南（可选）
  • $JAAN_CONTEXT_DIR/brand.md
    - 品牌指南（可选）
  • $JAAN_TEMPLATES_DIR/jaan-to:frontend-design.template.md
    - 输出模板
  • $JAAN_LEARN_DIR/jaan-to:frontend-design.learn.md
    - 过往经验（预执行阶段加载）
  • ${CLAUDE_PLUGIN_ROOT}/docs/extending/language-protocol.md
    - 语言解析协议

Input

输入

Component Request: $ARGUMENTS
Accepts any of:
  • Component description — "Create a hero section for SaaS landing page"
  • Detailed requirements — "Build a pricing card component with 3 tiers, hover effects, CTA buttons"
  • PRD reference — Path to PRD file with frontend requirements
  • Empty — Start interactive wizard
If no input provided, ask: "What component should I design and build?"
组件需求：$ARGUMENTS
接受以下任意输入：
  • 组件描述 — "为SaaS着陆页创建一个Hero区域"
  • 详细需求 — "构建一个包含3个层级、悬停效果和CTA按钮的定价卡片组件"
  • PRD参考 — 包含前端需求的PRD文件路径
  • 空输入 — 启动交互式向导
如果未提供任何输入，请询问："我应该设计并构建什么组件？"

Pre-Execution Protocol

预执行协议

MANDATORY — Read and execute ALL steps in: 
${CLAUDE_PLUGIN_ROOT}/docs/extending/pre-execution-protocol.md
Skill name: 
frontend-design
Execute: Step 0 (Init Guard) → A (Load Lessons) → B (Resolve Template) → C (Offer Template Seeding)
Also read context files if available:
  • $JAAN_CONTEXT_DIR/tech.md
    - Know the tech stack for framework-specific code generation
  • $JAAN_CONTEXT_DIR/design.md
    - Know the design system patterns
  • $JAAN_CONTEXT_DIR/brand.md
    - Know brand colors, fonts, tone
强制要求 — 阅读并执行以下文件中的所有步骤：
${CLAUDE_PLUGIN_ROOT}/docs/extending/pre-execution-protocol.md
技能名称：
frontend-design
执行顺序：步骤0（初始化校验）→ A（加载过往经验）→ B（解析模板）→ C（提供模板初始化）
同时读取可用的上下文文件：
  • $JAAN_CONTEXT_DIR/tech.md
    - 了解技术栈，用于生成框架特定的代码
  • $JAAN_CONTEXT_DIR/design.md
    - 了解设计系统模式
  • $JAAN_CONTEXT_DIR/brand.md
    - 了解品牌颜色、字体和风格

Language Settings

语言设置

Read and apply language protocol: 
${CLAUDE_PLUGIN_ROOT}/docs/extending/language-protocol.md
Override field for this skill: 
language_frontend-design
Language exception: Generated code output (variable names, code blocks, schemas, SQL, API specs) is NOT affected by this setting and remains in the project's programming language.
阅读并应用语言协议：
${CLAUDE_PLUGIN_ROOT}/docs/extending/language-protocol.md
本技能的覆盖字段：
language_frontend-design
语言例外：生成的代码输出（变量名、代码块、 schema、SQL、API规范）不受此设置影响，将保持项目的编程语言。

PHASE 1: Analysis (Read-Only)

第一阶段：分析（只读）

Thinking Mode

思考模式

ultrathink
Use extended reasoning for:
  • Analyzing component requirements and purpose
  • Planning bold design approaches
  • Considering accessibility and responsive patterns
  • Balancing creativity with usability
  • Architecting component structure
ultrathink
使用扩展推理完成以下工作：
  • 分析组件需求和用途
  • 规划大胆的设计方案
  • 考虑无障碍和响应式模式
  • 平衡创意与可用性
  • 架构组件结构

Step 1: Parse Component Request

步骤1：解析组件需求

Analyze the provided input to extract:
Build initial understanding:
COMPONENT REQUEST
─────────────────
Type:         {hero/card/form/modal/button/etc}
Purpose:      {what it does}
Context:      {where it's used}
Constraints:  {technical or design constraints}
Unknown:      {areas needing clarification}
If PRD reference:
  1. Read the PRD file
  2. Extract frontend-relevant requirements
  3. Identify component needs from user stories
  4. Note technical constraints mentioned
分析提供的输入，提取以下信息：
构建初始认知：
组件需求
─────────────────
类型：         {hero/卡片/表单/模态框/按钮等}
用途：      {功能作用}
使用场景：      {应用位置}
约束条件：  {技术或设计限制}
待明确：      {需要澄清的内容}
如果是PRD参考：
  1. 读取PRD文件
  2. 提取与前端相关的需求
  3. 从用户故事中识别组件需求
  4. 记录提到的技术约束

Step 2: Detect Tech Stack

步骤2：检测技术栈

Read 
$JAAN_CONTEXT_DIR/tech.md
if available:
  1. Extract frontend framework from 
    #current-stack
    or 
    #frameworks
    sections
  2. Determine: React, Vue, Svelte, vanilla JS, etc.
  3. Note framework version for API compatibility
  4. Identify styling approach from tech.md:
    • Tailwind CSS, CSS Modules, styled-components, Sass, vanilla CSS, etc.
If tech.md missing or incomplete:
  • Ask: "Which framework? (React/Vue/Svelte/Vanilla JS)"
  • Ask: "Styling approach? (Tailwind/CSS Modules/styled-components/vanilla CSS)"
如果可用，读取
$JAAN_CONTEXT_DIR/tech.md
：
  1. 从
    #current-stack
    或
    #frameworks
    章节提取前端框架
  2. 确定框架类型：React、Vue、Svelte、原生JS等
  3. 记录框架版本以确保API兼容性
  4. 从tech.md中识别样式方案：
    • Tailwind CSS、CSS Modules、styled-components、Sass、原生CSS等
如果tech.md缺失或不完整：
  • 询问："使用哪个框架？(React/Vue/Svelte/原生JS)"
  • 询问："样式方案？(Tailwind/CSS Modules/styled-components/原生CSS)"

Step 3: Gather Design Requirements

步骤3：收集设计需求

Ask up to 7 smart questions based on what's unclear from Steps 1-2. Skip questions already answered by the input or context files.
根据步骤1-2中未明确的内容，提出最多7个精准问题。跳过已由输入或上下文文件回答的问题。

Design Direction (check settings first)

设计方向（先检查设置）

  1. Check settings.yaml (if exists at 
    jaan-to/config/settings.yaml
    ):
    • Look for: 
      design.default_direction
      , 
      design.palette
      , 
      design.typography
    • If found, use as baseline
  2. Ask user to fill gaps or override (use AskUserQuestion):
    • Question: "What design direction should this take?"
    • Header: "Design Direction"
    • Options:
      • "Bold & Distinctive" — Modern, opinionated, memorable (recommended)
      • "Professional & Clean" — Conservative, trustworthy, subtle
      • "Playful & Creative" — Expressive, fun, unconventional
      • "Minimal & Elegant" — Refined, spacious, sophisticated
      • "Keep Settings Default" — (if settings exist)
  3. Infer from context (if still unclear after above):
    • Landing page hero → Bold & Distinctive
    • Dashboard widget → Professional & Clean
    • Marketing page → Playful & Creative
    • Admin form → Minimal & Elegant
  1. 检查settings.yaml（若存在于
    jaan-to/config/settings.yaml
    ）：
    • 查找：
      design.default_direction
      , 
      design.palette
      , 
      design.typography
    • 若找到，将其作为基础
  2. 询问用户补充或覆盖设置（使用AskUserQuestion）：
    • 问题："该组件应采用何种设计方向？"
    • 标题："设计方向"
    • 选项：
      • "大胆独特" — 现代、有主见、令人难忘（推荐）
      • "专业简洁" — 保守、可信、低调
      • "趣味创意" — 富有表现力、有趣、非传统
      • "极简优雅" — 精致、宽敞、高端
      • "保持默认设置" —（若设置存在）
  3. 从上下文推断（若上述步骤后仍不明确）：
    • 着陆页Hero区域 → 大胆独特
    • 仪表盘组件 → 专业简洁
    • 营销页面 → 趣味创意
    • 管理表单 → 极简优雅

Additional Questions (as needed)

补充问题（按需）

  1. "Any specific colors, typography, or brand elements to incorporate?" — only if not in brand.md
  2. "Any accessibility requirements? (WCAG level, screen reader support)" — only if unclear
  3. "Responsive breakpoints needed? (mobile-first assumed)" — only if special requirements
  4. "Dark mode support needed?" — only if not specified in design.md
  1. "是否需要融入特定的颜色、排版或品牌元素？" — 仅当brand.md中未包含时询问
  2. "有无无障碍需求？(WCAG级别、屏幕阅读器支持)" — 仅当不明确时询问
  3. "是否需要响应式断点？(默认采用移动端优先)" — 仅当有特殊需求时询问
  4. "是否需要支持深色模式？" — 仅当design.md中未指定时询问

Step 4: Design System Check

步骤4：设计系统检查

Check for existing patterns to maintain consistency:
  1. Glob for 
    $JAAN_OUTPUTS_DIR/frontend/design/*
    to see existing components
  2. Read 
    $JAAN_CONTEXT_DIR/design.md
    (if exists) for:
    • Color palette and usage guidelines
    • Typography scale and hierarchy
    • Spacing system (e.g., 4px, 8px grid)
    • Component patterns and conventions
    • Motion/animation guidelines
  3. Grep for similar component patterns (buttons, cards, forms) in codebase
Decision:
  • If patterns exist → Note them for consistency
  • If no patterns → Create opinionated defaults that establish new standards
检查现有模式以保持一致性：
  1. 全局搜索 
    $JAAN_OUTPUTS_DIR/frontend/design/*
    查看现有组件
  2. 读取 
    $JAAN_CONTEXT_DIR/design.md
    （若存在）以获取：
    • 调色板和使用指南
    • 排版比例和层级
    • 间距系统（如4px、8px网格）
    • 组件模式和约定
    • 动效/动画指南
  3. 搜索代码库中类似的组件模式（按钮、卡片、表单）
决策：
  • 若存在模式 → 记录以保持一致性
  • 若无模式 → 创建有主见的默认设置，建立新的标准

Step 5: Plan Component Structure

步骤5：规划组件结构

Based on requirements, tech stack, and design direction, outline the component:
For React:
  • Component structure (functional component with hooks)
  • Props interface (TypeScript if project uses it)
  • State management (if needed - useState, useReducer)
  • Styling approach (based on tech.md)
  • Accessibility attributes (ARIA labels, roles, keyboard handlers)
For Vue:
  • Single File Component structure
  • Props definition with TypeScript (if applicable)
  • Composition API or Options API (based on project version)
  • Scoped styles
  • Accessibility attributes
For Vanilla JS/HTML:
  • Semantic HTML structure
  • Progressive enhancement approach
  • CSS organization (BEM methodology, utility classes, or custom properties)
  • Minimal JS (if needed for interactivity)
Design Elements to Plan:
  • Layout system: Grid, Flexbox, Container Queries
  • Typography hierarchy: Display, heading, body, caption levels
  • Color usage: Primary, accent, neutral, semantic (success/error/warning)
  • Interactive states: hover, focus, active, disabled, loading, error
  • Micro-interactions: transitions, animations, scroll-triggered effects
  • Responsive behavior: mobile-first breakpoints (e.g., 640px, 1024px, 1280px)
Present component plan:
COMPONENT DESIGN PLAN
─────────────────────
Name:         {ComponentName}
Framework:    {React/Vue/Vanilla}
Type:         {hero/card/form/etc}
Styling:      {Tailwind/CSS Modules/etc}
Scope:        Component + Preview (default)

Key Features:
- {feature_1}
- {feature_2}
- {feature_3}

Design Choices:
- Layout: {grid/flex/hybrid with rationale}
- Typography: {font families, scale, hierarchy}
- Colors: {palette with purpose and meaning}
- Motion: {animation approach and timing}
- Responsive: {breakpoint strategy and behavior}

Accessibility:
- ARIA labels: {yes/no, which ones}
- Keyboard nav: {tab order, focus management}
- Screen reader: {SR-only text, descriptions}
- Color contrast: {WCAG AA/AAA ratios}

Differentiation:
- What makes this distinctive: {unique design choice}
- How it avoids AI slop: {specific anti-patterns avoided}
根据需求、技术栈和设计方向，规划组件：
对于React：
  • 组件结构（带hooks的函数式组件）
  • Props接口（若项目使用TypeScript）
  • 状态管理（如需 - useState、useReducer）
  • 样式方案（基于tech.md）
  • 无障碍属性（ARIA标签、角色、键盘事件处理器）
对于Vue：
  • 单文件组件结构
  • 带TypeScript的Props定义（若适用）
  • Composition API或Options API（基于项目版本）
  • 作用域样式
  • 无障碍属性
对于原生JS/HTML：
  • 语义化HTML结构
  • 渐进增强方案
  • CSS组织（BEM方法论、工具类或自定义属性）
  • 极简JS（如需交互）
需要规划的设计元素：
  • 布局系统：Grid、Flexbox、容器查询
  • 排版层级：展示级、标题、正文、说明文字层级
  • 颜色使用：主色、强调色、中性色、语义色（成功/错误/警告）
  • 交互状态：hover、focus、active、disabled、loading、error
  • 微交互：过渡、动画、滚动触发效果
  • 响应式行为：移动端优先断点（如640px、1024px、1280px）
呈现组件规划：
组件设计规划
─────────────────────
名称：         {ComponentName}
框架：    {React/Vue/原生}
类型：         {hero/卡片/表单等}
样式方案：      {Tailwind/CSS Modules等}
范围：        组件 + 预览（默认）

核心特性：
- {特性1}
- {特性2}
- {特性3}

设计选择：
- 布局：{网格/弹性/混合及理由}
- 排版：{字体家族、比例、层级}
- 颜色：{调色板及用途含义}
- 动效：{动画方案和时长}
- 响应式：{断点策略和行为}

无障碍支持：
- ARIA标签：{是/否，具体标签}
- 键盘导航：{Tab顺序、焦点管理}
- 屏幕阅读器：{仅屏幕可见文本、描述}
- 颜色对比度：{WCAG AA/AAA比率}

差异化设计：
- 独特之处：{独特的设计选择}
- 避免AI通用化：{规避的具体反模式}

HARD STOP — Review Design Plan

强制暂停 — 审核设计规划

Present complete design summary to user.
Use AskUserQuestion:
  • Question: "Proceed with generating the component code?"
  • Header: "Generate Component"
  • Options:
    • "Yes" — Generate the component
    • "No" — Cancel
    • "Edit" — Let me revise the design direction first
Do NOT proceed to Phase 2 without explicit approval.
向用户呈现完整的设计摘要。
使用AskUserQuestion：
  • 问题："是否继续生成组件代码？"
  • 标题："生成组件"
  • 选项：
    • "是" — 生成组件
    • "否" — 取消
    • "编辑" — 先让我修改设计方向
未经明确批准，不得进入第二阶段。

PHASE 2: Generation (Write Phase)

第二阶段：生成（写入阶段）

Step 6: Generate Component Code

步骤6：生成组件代码

Create production-grade, framework-specific component code:
创建生产级、框架特定的组件代码：

For All Frameworks:

所有框架通用要求：

  1. Semantic structure — Use proper HTML5 elements (header, section, article, nav, button, etc.)
  2. Accessibility — ARIA attributes, roles, keyboard handlers, focus management
  3. Modern CSS — Grid, Custom Properties, Container Queries, modern selectors
  4. Bold design — Distinctive typography, purposeful colors, unexpected layouts
  5. Responsive — Mobile-first approach with fluid scaling
  6. Comments — Inline documentation explaining non-obvious design choices
  1. 语义化结构 — 使用正确的HTML5元素（header、section、article、nav、button等）
  2. 无障碍支持 — ARIA属性、角色、键盘事件处理器、焦点管理
  3. 现代CSS — Grid、自定义属性、容器查询、现代选择器
  4. 大胆设计 — 独特的排版、有目的性的颜色、新颖的布局
  5. 响应式 — 移动端优先的流体缩放方案
  6. 注释 — 内联文档说明非显而易见的设计选择

React Example Structure:

React示例结构：

jsx
// Component with TypeScript props (if applicable)
// Clear prop documentation
// State management (if needed)
// Accessibility attributes
// Inline style comments explaining design choices
jsx
// 带TypeScript Props的组件（若适用）
// 清晰的Props文档
// 状态管理（如需）
// 无障碍属性
// 解释设计选择的内联样式注释

Vue Example Structure:

Vue示例结构：

vue
<!-- Template with semantic HTML -->
<!-- Props with TypeScript (if applicable) -->
<!-- Scoped styles with design tokens -->
<!-- Accessibility attributes -->
vue
<!-- 语义化HTML模板 -->
<!-- 带TypeScript的Props（若适用） -->
<!-- 带设计令牌的作用域样式 -->
<!-- 无障碍属性 -->

Vanilla HTML/CSS/JS Structure:

原生HTML/CSS/JS结构：

html
<!-- Semantic HTML structure -->
<!-- Progressive enhancement -->
<!-- CSS with custom properties -->
<!-- Minimal JS for interactivity -->
html
<!-- 语义化HTML结构 -->
<!-- 渐进增强 -->
<!-- 带自定义属性的CSS -->
<!-- 用于交互的极简JS -->

CSS Guidelines (All Frameworks):

CSS指南（所有框架）：

  • Use CSS custom properties for theming: 
    --color-primary
    , 
    --spacing-unit
  • Modern features: 
    clamp()
    for fluid typography, 
    min()
    , 
    max()
  • Container queries for component-level responsiveness
  • Smooth transitions: 
    transition: all 0.2s ease-in-out
  • Dark mode support (if needed): 
    @media (prefers-color-scheme: dark)
  • Reduced motion support: 
    @media (prefers-reduced-motion: reduce)
  • 使用CSS自定义属性进行主题化：
    --color-primary
    , 
    --spacing-unit
  • 现代特性：
    clamp()
    用于流体排版、
    min()
    , 
    max()
  • 容器查询实现组件级响应式
  • 平滑过渡：
    transition: all 0.2s ease-in-out
  • 深色模式支持（如需）：
    @media (prefers-color-scheme: dark)
  • 减少动效支持：
    @media (prefers-reduced-motion: reduce)

Design Differentiation:

设计差异化：

  • Typography: Avoid Inter, Roboto, Arial — choose distinctive fonts
  • Colors: Avoid generic purple gradients — use purpose-driven palette
  • Layout: Avoid predictable grid — try asymmetry, overlap, diagonal flow
  • Motion: Avoid scattered micro-interactions — focus on high-impact moments
  • 排版：避免Inter、Roboto、Arial — 选择独特的字体
  • 颜色：避免通用的紫色渐变 — 使用有目的性的调色板
  • 布局：避免可预测的网格 — 尝试不对称、重叠、对角线布局
  • 动效：避免零散的微交互 — 聚焦于高影响力的时刻

Step 7: Generate Preview File

步骤7：生成预览文件

Create standalone HTML preview showing the component in action:
Preview File Structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{ComponentName} Preview</title>
  <!-- Import framework (CDN) if React/Vue -->
  <!-- Import component styles -->
</head>
<body>
  <!-- Component demonstration -->
  <!-- Multiple states if applicable (default, hover, active, disabled, etc.) -->
  <!-- Responsive preview at different viewport widths -->
</body>
</html>
Variants to show:
  • Default state
  • Interactive states (hover, focus, active)
  • Different props/configurations (if applicable)
  • Error/loading states (if applicable)
  • Dark mode (if supported)
创建独立的HTML预览文件，展示组件的实际效果：
预览文件结构：
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{ComponentName} 预览</title>
  <!-- 导入框架（CDN）如果是React/Vue -->
  <!-- 导入组件样式 -->
</head>
<body>
  <!-- 组件演示 -->
  <!-- 不同状态（默认、hover、active、disabled等）（若适用） -->
  <!-- 不同视口宽度的响应式预览 -->
</body>
</html>
需要展示的变体：
  • 默认状态 -交互状态（hover、focus、active）
  • 不同的Props/配置（若适用）
  • 错误/加载状态（若适用）
  • 深色模式（若支持）

Step 8: Generate Documentation

步骤8：生成文档

Read template: 
$JAAN_TEMPLATES_DIR/jaan-to:frontend-design.template.md
Fill all sections:
  • Executive Summary: 1-2 sentence overview (component type, framework, key design characteristic)
  • Overview: Component metadata table
  • Design Rationale: Why these aesthetic and technical choices? How does it avoid generic patterns?
  • Usage: Installation, imports, basic example, props API
  • Code: Reference to code file with key highlights
  • Accessibility: WCAG compliance details, keyboard nav, screen reader support
  • Responsive Behavior: Breakpoint behavior table
  • Customization: CSS variables for theming
  • Metadata: Generated date, skill version, output path
读取模板：
$JAAN_TEMPLATES_DIR/jaan-to:frontend-design.template.md
填写所有章节：
  • 执行摘要：1-2句话概述（组件类型、框架、核心设计特点）
  • 概述：组件元数据表
  • 设计 rationale：为什么选择这些美学和技术方案？如何避免通用模式？
  • 使用方法：安装、导入、基础示例、Props API
  • 代码：代码文件的引用及核心亮点
  • 无障碍支持：WCAG合规细节、键盘导航、屏幕阅读器支持
  • 响应式行为：断点行为表
  • 自定义：用于主题化的CSS变量
  • 元数据：生成日期、技能版本、输出路径

Step 9: Quality Check

步骤9：质量检查

Before preview, verify all items:
  • Code is syntactically valid (no syntax errors)
  • Semantic HTML used (proper elements, not div soup)
  • Accessibility attributes present (ARIA labels, roles, keyboard handlers)
  • Responsive design implemented (mobile-first, fluid scaling)
  • Design choices are bold and distinctive (not generic)
  • Color contrast meets WCAG AA (4.5:1 for text, 3:1 for UI elements)
  • Focus indicators visible (not 
    outline: none
    without replacement)
  • Inline comments explain non-obvious choices
  • No hardcoded values that should be design tokens
  • Documentation is complete with all required sections
If any check fails, fix before proceeding.
预览前，验证所有项：
  • 代码语法有效（无语法错误）
  • 使用了语义化HTML（正确的元素，而非div堆砌）
  • 存在无障碍属性（ARIA标签、角色、键盘事件处理器）
  • 实现了响应式设计（移动端优先、流体缩放）
  • 设计选择大胆独特（非通用）
  • 颜色对比度符合WCAG AA（文本4.5:1，UI元素3:1）
  • 焦点指示器可见（不使用
    outline: none
    而无替代方案）
  • 内联注释解释非显而易见的选择
  • 没有应作为设计令牌的硬编码值
  • 文档包含所有必填章节
如果任何检查项未通过，修复后再继续。

Step 10: Preview & Approval

步骤10：预览与批准

Show complete output to user:
  • Component code (first 50 lines or full if short)
  • Key design choices highlighted
  • Documentation structure
  • Preview file path
Use AskUserQuestion:
  • Question: "Write component files to output?"
  • Header: "Write Files"
  • Options:
    • "Yes" — Write the files
    • "No" — Cancel
    • "Refine" — Make adjustments first
向用户展示完整输出：
  • 组件代码（前50行，若较短则展示全部）
  • 突出显示核心设计选择
  • 文档结构
  • 预览文件路径
使用AskUserQuestion：
  • 问题："是否将组件文件写入输出目录？"
  • 标题："写入文件"
  • 选项：
    • "是" — 写入文件
    • "否" — 取消
    • "优化" — 先进行调整

Step 10.5: Generate ID and Folder Structure

步骤10.5：生成ID和文件夹结构

bash
undefined
bash
undefined

Source ID generator utility

引入ID生成工具

source "${CLAUDE_PLUGIN_ROOT}/scripts/lib/id-generator.sh"
source "${CLAUDE_PLUGIN_ROOT}/scripts/lib/id-generator.sh"

Define subdomain directory

定义子域目录

SUBDOMAIN_DIR="$JAAN_OUTPUTS_DIR/frontend/design" mkdir -p "$SUBDOMAIN_DIR"
SUBDOMAIN_DIR="$JAAN_OUTPUTS_DIR/frontend/design" mkdir -p "$SUBDOMAIN_DIR"

Generate next sequential ID

生成下一个连续ID

NEXT_ID=$(generate_next_id "$SUBDOMAIN_DIR")
NEXT_ID=$(generate_next_id "$SUBDOMAIN_DIR")

Create slug from component name (lowercase-kebab-case, max 50 chars)

从组件名称生成slug（小写短横线分隔，最多50字符）

slug="{component-name-slug}"
slug="{component-name-slug}"

Generate paths

生成路径

OUTPUT_FOLDER="${SUBDOMAIN_DIR}/${NEXT_ID}-${slug}" MAIN_FILE="${OUTPUT_FOLDER}/${NEXT_ID}-${slug}.md" CODE_FILE="${OUTPUT_FOLDER}/${NEXT_ID}-${slug}-code.{jsx|vue|html}" PREVIEW_FILE="${OUTPUT_FOLDER}/${NEXT_ID}-${slug}-preview.html"

**Preview output configuration:**
> **Output Configuration**
> - ID: {NEXT_ID}
> - Folder: $JAAN_OUTPUTS_DIR/frontend/design/{NEXT_ID}-{slug}/
> - Files:
>   - {NEXT_ID}-{slug}.md (documentation)
>   - {NEXT_ID}-{slug}-code.{ext} (code)
>   - {NEXT_ID}-{slug}-preview.html (preview)
OUTPUT_FOLDER="${SUBDOMAIN_DIR}/${NEXT_ID}-${slug}" MAIN_FILE="${OUTPUT_FOLDER}/${NEXT_ID}-${slug}.md" CODE_FILE="${OUTPUT_FOLDER}/${NEXT_ID}-${slug}-code.{jsx|vue|html}" PREVIEW_FILE="${OUTPUT_FOLDER}/${NEXT_ID}-${slug}-preview.html"

**预览输出配置：**
> **输出配置**
> - ID：{NEXT_ID}
> - 文件夹：$JAAN_OUTPUTS_DIR/frontend/design/{NEXT_ID}-{slug}/
> - 文件：
>   - {NEXT_ID}-{slug}.md（文档）
>   - {NEXT_ID}-{slug}-code.{ext}（代码）
>   - {NEXT_ID}-{slug}-preview.html（预览）

Step 11: Write Output

步骤11：写入输出

  1. Create output folder:
    bash
    mkdir -p "$OUTPUT_FOLDER"
  2. Write documentation file: Write filled template to 
    $MAIN_FILE
  3. Write component code file: Write generated code to 
    $CODE_FILE
  4. Write preview file: Write standalone preview to 
    $PREVIEW_FILE
  5. Update subdomain index:
    bash
    source "${CLAUDE_PLUGIN_ROOT}/scripts/lib/index-updater.sh"
add_to_index \
  "$SUBDOMAIN_DIR/README.md" \
  "$NEXT_ID" \
  "${NEXT_ID}-${slug}" \
  "{ComponentName}" \
  "{Executive summary — 1-2 sentences}"
  6. Confirm to user:
    ✓ Component written to: $JAAN_OUTPUTS_DIR/frontend/design/{NEXT_ID}-{slug}/ ✓ Files created:
    • {NEXT_ID}-{slug}.md
    • {NEXT_ID}-{slug}-code.{ext}
    • {NEXT_ID}-{slug}-preview.html ✓ Index updated: $JAAN_OUTPUTS_DIR/frontend/design/README.md
  1. 创建输出文件夹：
    bash
    mkdir -p "$OUTPUT_FOLDER"
  2. 写入文档文件： 将填充后的模板写入
    $MAIN_FILE
  3. 写入组件代码文件： 将生成的代码写入
    $CODE_FILE
  4. 写入预览文件： 将独立预览写入
    $PREVIEW_FILE
  5. 更新子域索引：
    bash
    source "${CLAUDE_PLUGIN_ROOT}/scripts/lib/index-updater.sh"
add_to_index \
  "$SUBDOMAIN_DIR/README.md" \
  "$NEXT_ID" \
  "${NEXT_ID}-${slug}" \
  "{ComponentName}" \
  "{执行摘要 — 1-2句话}"
  6. 向用户确认：
    ✓ 组件已写入：$JAAN_OUTPUTS_DIR/frontend/design/{NEXT_ID}-{slug}/ ✓ 创建的文件：
    • {NEXT_ID}-{slug}.md
    • {NEXT_ID}-{slug}-code.{ext}
    • {NEXT_ID}-{slug}-preview.html ✓ 索引已更新：$JAAN_OUTPUTS_DIR/frontend/design/README.md

Step 12: Suggest Next Actions

步骤12：建议下一步操作

Present follow-up workflow options:
Component generated successfully!
Next Steps:
  • Copy code from 
    {CODE_FILE}
    to your project
  • Open 
    {PREVIEW_FILE}
    in browser to see live preview
  • Run 
    /jaan-to:qa-test-cases "{MAIN_FILE}"
    to generate test cases
  • Run 
    /jaan-to:frontend-task-breakdown
    if you need integration tasks for larger feature
呈现后续工作流选项：
组件生成成功！
下一步：
  • 从
    {CODE_FILE}
    复制代码到你的项目
  • 在浏览器中打开
    {PREVIEW_FILE}
    查看实时预览
  • 运行
    /jaan-to:qa-test-cases "{MAIN_FILE}"
    生成测试用例
  • 若需要为大型功能拆分集成任务，运行
    /jaan-to:frontend-task-breakdown

Step 13: Capture Feedback

步骤13：收集反馈

Use AskUserQuestion:
  • Question: "How did the component turn out?"
  • Header: "Feedback"
  • Options:
    • "Perfect!" — Done
    • "Needs fixes" — What should I improve?
    • "Learn from this" — Capture a lesson for future runs
If "Learn from this":
  • Run 
    /jaan-to:learn-add frontend-design "{feedback}"
使用AskUserQuestion：
  • 问题："组件效果如何？"
  • 标题："反馈"
  • 选项：
    • "完美！" — 完成
    • "需要修复" — 我应该改进什么？
    • "从中学习" — 记录经验用于未来运行
如果选择"从中学习"：
  • 运行
    /jaan-to:learn-add frontend-design "{反馈}"

Skill Alignment

技能对齐

  • Two-phase workflow with HARD STOP for human approval
  • Framework-agnostic with 
    tech.md
    detection
  • Template-driven output structure
  • Output to standardized 
    $JAAN_OUTPUTS_DIR
    path
  • 分两阶段工作流，强制暂停以获取人工批准
  • 基于
    tech.md
    检测的框架无关性
  • 模板驱动的输出结构
  • 输出到标准化的
    $JAAN_OUTPUTS_DIR
    路径

Definition of Done

完成定义

  • Valid, working code generated
  • Bold design choices implemented and documented
  • WCAG AA accessibility met
  • Responsive design (mobile-first) implemented
  • Framework matches tech.md (or user choice)
  • Documentation complete with all required sections
  • Preview file works (if scope includes preview)
  • Output follows v3.0.0 structure (ID, folder, index)
  • Index updated with executive summary
  • User approved final result
  • 生成有效、可运行的代码
  • 实现并记录了大胆的设计选择
  • 满足WCAG AA无障碍标准
  • 实现了响应式设计（移动端优先）
  • 框架与tech.md匹配（或用户选择）
  • 文档包含所有必填章节
  • 预览文件可正常工作（若范围包含预览）
  • 输出遵循v3.0.0结构（ID、文件夹、索引）
  • 索引已更新执行摘要
  • 用户批准最终结果