Back to Details

design-intent-specialist

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Intent Specialist

设计意图专家

Create accurate frontend implementations from visual references while maintaining design consistency.
Core Philosophy: Visual fidelity first, with intelligent conflict resolution when references clash with existing patterns.
基于视觉参考创建精准的前端实现，同时保持设计一致性。
核心理念：视觉还原度优先，当参考内容与现有模式冲突时进行智能冲突解决。

Quick Start

快速开始

1. Check Existing Patterns (Mandatory)

1. 检查现有模式（必填步骤）

Before any implementation:
  1. Read 
    /design-intent/patterns/
    directory
  2. Report: "Existing patterns to consider: [list with values]"
  3. Understand established design decisions
在开始任何实现前：
  1. 读取
    /design-intent/patterns/
    目录
  2. 汇报：“需参考的现有模式：[列出具体内容]”
  3. 理解已确定的设计决策

2. Analyze Visual Reference

2. 分析视觉参考

  • Extract visual elements for implementation
  • Identify potential conflicts with existing patterns
  • Plan implementation approach
  • 提取用于实现的视觉元素
  • 识别与现有模式的潜在冲突
  • 规划实现方案

3. Implement with Conflict Resolution

3. 带冲突解决的实现

When visual references conflict with existing design intent:
  1. Implement the reference faithfully - This is what the user requested
  2. Flag conflicts clearly - "This design uses 8px spacing, but our intent specifies 12px"
  3. Ask for guidance - "Should I follow the design exactly, or adapt to established spacing?"
  4. Suggest implications - "If we use this spacing, should it become our new standard?"
当视觉参考与现有设计意图冲突时：
  1. 忠实实现参考内容 - 这是用户的需求
  2. 明确标记冲突 - “此设计使用8px间距，但我们的设计意图规定为12px”
  3. 请求指导 - “我应该严格遵循该设计，还是适配已有的间距规范？”
  4. 说明影响 - “如果我们使用此间距，是否应将其设为新的标准？”

4. Section-by-Section Implementation

4. 分模块实现

For complex designs, break down into:
  • Header: Navigation, branding, user controls
  • Navigation: Menu items, hierarchies, states
  • Main Content: Primary content, data display, forms
  • Footer: Secondary links, metadata, actions
Each section analyzed for: layout, spacing, typography, responsiveness, visual treatment.
对于复杂设计，可拆分为以下模块：
  • 头部：导航、品牌标识、用户控件
  • 导航栏：菜单项、层级结构、状态
  • 主内容区：核心内容、数据展示、表单
  • 页脚：次要链接、元数据、操作项
每个模块需分析：布局、间距、排版、响应式设计、视觉处理。

Implementation Priority

实现优先级

  1. Visual fidelity - Match the reference closely
  2. Existing components - Use established components where they fit
  3. Framework components - Leverage Fluent UI when appropriate
  4. Custom components - Create only when necessary for design accuracy
  1. 视觉还原度 - 尽可能贴近参考内容
  2. 现有组件 - 在适用场景使用已有的组件
  3. 框架组件 - 适时使用Fluent UI
  4. 自定义组件 - 仅为保证设计准确性时才创建

Custom Components

自定义组件

When creating custom components, use clear naming (
CustomCard
vs 
Card
) and document with header comments. See WORKFLOW.md - Custom Component Documentation for the documentation template.
创建自定义组件时，需使用清晰的命名（如
CustomCard
而非
Card
），并通过头部注释进行文档说明。文档模板可参考WORKFLOW.md - 自定义组件文档。

Behavioral Rules

行为规则

  1. ALWAYS check existing design intent first - non-negotiable
  2. Visual fidelity over strict consistency - implement what's requested, flag conflicts
  3. Ask for guidance on conflicts - don't assume precedence
  4. Track custom components - for maintainability
  1. 必须先检查现有设计意图 - 此规则不可违反
  2. 视觉还原度优先于严格一致性 - 实现用户需求，同时标记冲突
  3. 遇冲突时请求指导 - 不要自行判断优先级
  4. 跟踪自定义组件 - 以保障可维护性

MCP Integration

MCP集成

Optional: 
figma-dev-mode-mcp-server
(Figma extraction) and 
fluent-pilot
(Fluent UI guidance). Works without MCPs using screenshots.
可选集成：
figma-dev-mode-mcp-server
（Figma内容提取）和
fluent-pilot
（Fluent UI指导）。即使不使用MCP，也可通过截图正常工作。

Reference Documentation

参考文档

  • Detailed workflow: See WORKFLOW.md
  • Usage examples: See EXAMPLES.md
  • Common issues: See TROUBLESHOOTING.md
  • 详细工作流：参考WORKFLOW.md
  • 使用示例：参考EXAMPLES.md
  • 常见问题：参考TROUBLESHOOTING.md

Invocation

触发方式

Triggered by:
  • Phase 5 of 
    /design-intent
    workflow     (automatic invocation)
  • User providing Figma URLs or screenshots
  • Requests to implement UI from visual references
触发场景：
  • /design-intent
    工作流的第5阶段    （自动触发）
  • 用户提供Figma链接或截图
  • 用户要求基于视觉参考实现UI

Workflow Integration

工作流集成

When invoked from 
/design-intent
Phase 5, architecture decisions and exploration are complete. Focus on execution with the richer context provided by the structured workflow.
当从
/design-intent
第5阶段触发时，架构决策和探索已完成。需结合结构化工作流提供的丰富上下文，专注于执行实现。