Add ui-designer skill
Extract design systems from UI images and generate implementation-ready prompts through systematic workflow. Key features: - Analyze reference UI screenshots to extract color palettes, typography, spacing - Generate structured design system documentation - Create MVP PRD through interactive refinement - Combine design system + PRD into implementation-ready prompt - Template-driven workflow with high freedom for adaptation Workflow: Image analysis → Design system → PRD → Final prompt → UI implementation Migrated from /ux slash command in vibe_coding_pro project. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
daymade
191
ui-designer/SKILL.md
Normal file
191
ui-designer/SKILL.md
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
---
|
||||||
|
name: ui-designer
|
||||||
|
description: Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.
|
||||||
|
---
|
||||||
|
|
||||||
|
# UI Designer
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This skill enables systematic extraction of design systems from reference UI images through a multi-step workflow: analyze visual patterns → generate design system documentation → create PRD → produce implementation-ready UI prompts.
|
||||||
|
|
||||||
|
## When to Use
|
||||||
|
|
||||||
|
- User provides UI screenshots, mockups, or design references
|
||||||
|
- Need to extract color palettes, typography, spacing from existing designs
|
||||||
|
- Want to generate design system documentation from visual examples
|
||||||
|
- Building MVP UI that should match reference aesthetics
|
||||||
|
- Creating multiple UI variations following consistent design principles
|
||||||
|
|
||||||
|
## Workflow
|
||||||
|
|
||||||
|
### Step 1: Gather Inputs
|
||||||
|
|
||||||
|
Request from user:
|
||||||
|
- **Reference images directory**: Path to folder containing UI screenshots/mockups
|
||||||
|
- **Project idea file**: Document describing the product concept and goals
|
||||||
|
- **Existing PRD** (optional): If PRD already exists, skip Step 3
|
||||||
|
|
||||||
|
### Step 2: Extract Design System from Images
|
||||||
|
|
||||||
|
**Use Task tool with general-purpose subagent**, providing:
|
||||||
|
|
||||||
|
**Prompt template** from `assets/design-system.md`:
|
||||||
|
- Analyze color palettes (primary, secondary, accent, functional colors)
|
||||||
|
- Extract typography (font families, sizes, weights, line heights)
|
||||||
|
- Identify component styles (buttons, cards, inputs, icons)
|
||||||
|
- Document spacing system
|
||||||
|
- Note animations/transitions patterns
|
||||||
|
- Include dark mode variants if present
|
||||||
|
|
||||||
|
**Attach reference images** to the subagent context.
|
||||||
|
|
||||||
|
**Output**: Complete design system markdown following the template format
|
||||||
|
|
||||||
|
**Save to**: `documents/designs/{image_dir_name}_design_system.md`
|
||||||
|
|
||||||
|
### Step 3: Generate MVP PRD (if not provided)
|
||||||
|
|
||||||
|
**Use Task tool with general-purpose subagent**, providing:
|
||||||
|
|
||||||
|
**Prompt template** from `assets/app-overview-generator.md`:
|
||||||
|
- Replace `{项目背景}` with content from project idea file
|
||||||
|
- The template guides through: elevator pitch, problem statement, target audience, USP, features list, UX/UI considerations
|
||||||
|
|
||||||
|
**Interact with user** to refine and clarify product requirements
|
||||||
|
|
||||||
|
**Output**: Structured PRD markdown
|
||||||
|
|
||||||
|
**Save as variable** for Step 4 (optionally save to `documents/prd/`)
|
||||||
|
|
||||||
|
### Step 4: Compose Final UI Implementation Prompt
|
||||||
|
|
||||||
|
Combine design system and PRD using `assets/vibe-design-template.md`:
|
||||||
|
|
||||||
|
**Substitutions:**
|
||||||
|
- `{项目设计指南}` → Design system from Step 2
|
||||||
|
- `{项目MVP PRD}` → PRD from Step 3 or provided PRD file
|
||||||
|
|
||||||
|
**Result**: Complete, implementation-ready prompt containing:
|
||||||
|
- Design aesthetics principles
|
||||||
|
- Project-specific color/typography guidelines
|
||||||
|
- App overview and feature requirements
|
||||||
|
- Implementation tasks (multiple UI variations, component structure)
|
||||||
|
|
||||||
|
**Save to**: `documents/ux-design/{idea_file_name}_design_prompt_{timestamp}.md`
|
||||||
|
|
||||||
|
### Step 5: Verify React Environment
|
||||||
|
|
||||||
|
Check for existing React project:
|
||||||
|
```bash
|
||||||
|
find . -name "package.json" -exec grep -l "react" {} \;
|
||||||
|
```
|
||||||
|
|
||||||
|
If none found, inform user:
|
||||||
|
```bash
|
||||||
|
npx create-react-app my-app
|
||||||
|
cd my-app
|
||||||
|
npm install -D tailwindcss postcss autoprefixer
|
||||||
|
npx tailwindcss init -p
|
||||||
|
npm install lucide-react
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 6: Implement UI
|
||||||
|
|
||||||
|
Use the final composed prompt from Step 4 to implement UI in React project.
|
||||||
|
|
||||||
|
The prompt instructs to:
|
||||||
|
- Create multiple design variations (3 for mobile, 2 for web)
|
||||||
|
- Organize as separate components: `[solution-name]/pages/[page-name].jsx`
|
||||||
|
- Aggregate all variations in showcase page
|
||||||
|
|
||||||
|
## Template Assets
|
||||||
|
|
||||||
|
### assets/design-system.md
|
||||||
|
|
||||||
|
Template for extracting visual design patterns. Includes sections for:
|
||||||
|
- Color palette (primary, secondary, accent, functional, backgrounds)
|
||||||
|
- Typography (font families, weights, text styles)
|
||||||
|
- Component styles (buttons, cards, inputs, icons)
|
||||||
|
- Spacing system (4dp-48dp scale)
|
||||||
|
- Animations (durations, easing curves)
|
||||||
|
- Dark mode variants
|
||||||
|
|
||||||
|
Use this template when analyzing reference images to ensure comprehensive design system coverage.
|
||||||
|
|
||||||
|
### assets/app-overview-generator.md
|
||||||
|
|
||||||
|
Template for collaborative PRD generation. Guides through:
|
||||||
|
- Elevator pitch
|
||||||
|
- Problem statement and target audience
|
||||||
|
- Unique selling proposition
|
||||||
|
- Platform targets
|
||||||
|
- Feature list with user stories
|
||||||
|
- UX/UI considerations per screen
|
||||||
|
|
||||||
|
Designed for interactive refinement with user to clarify requirements.
|
||||||
|
|
||||||
|
### assets/vibe-design-template.md
|
||||||
|
|
||||||
|
Final implementation prompt template combining design system and PRD. Includes:
|
||||||
|
- Aesthetic principles (minimalism, whitespace, color theory, typography hierarchy)
|
||||||
|
- Practical requirements (Tailwind CSS, Lucide icons, responsive design)
|
||||||
|
- Task specifications (multiple variations, component organization)
|
||||||
|
|
||||||
|
This template produces prompts ready for UI implementation without further modification.
|
||||||
|
|
||||||
|
## Best Practices
|
||||||
|
|
||||||
|
### Image Analysis
|
||||||
|
|
||||||
|
- Read all images before starting analysis
|
||||||
|
- Look for patterns across multiple screens
|
||||||
|
- Note both explicit styles (colors, fonts) and implicit principles (spacing, hierarchy)
|
||||||
|
- Capture dark mode if present in references
|
||||||
|
|
||||||
|
### Design System Extraction
|
||||||
|
|
||||||
|
- Be systematic: cover all template sections
|
||||||
|
- Use specific values (hex codes, px sizes) not generic descriptions
|
||||||
|
- Document the "why" for design choices when inferable
|
||||||
|
- Include variants (hover states, disabled states)
|
||||||
|
|
||||||
|
### PRD Generation
|
||||||
|
|
||||||
|
- Engage user interactively to clarify ambiguities
|
||||||
|
- Suggest features based on problem understanding
|
||||||
|
- Ensure MVP scope is realistic
|
||||||
|
- Document UX considerations per screen/interaction
|
||||||
|
|
||||||
|
### Output Organization
|
||||||
|
|
||||||
|
- Save design system with descriptive filename (based on image dir name)
|
||||||
|
- Save final prompt with timestamp for version tracking
|
||||||
|
- Keep all outputs in `documents/` directory for easy reference
|
||||||
|
- Preserve intermediate outputs for iteration
|
||||||
|
|
||||||
|
## Example Usage
|
||||||
|
|
||||||
|
**User provides:**
|
||||||
|
- `reference-images/saas-dashboard/` (5 screenshots)
|
||||||
|
- `ideas/project-management-app.md` (project concept)
|
||||||
|
|
||||||
|
**Execute workflow:**
|
||||||
|
|
||||||
|
1. Read 5 images from `reference-images/saas-dashboard/`
|
||||||
|
2. Use Task tool → design-system.md template → analyze images
|
||||||
|
3. Save to `documents/designs/saas-dashboard_design_system.md`
|
||||||
|
4. Use Task tool → app-overview-generator.md with project concept
|
||||||
|
5. Refine PRD through user interaction
|
||||||
|
6. Combine design system + PRD using vibe-design-template.md
|
||||||
|
7. Save to `documents/ux-design/project-management-app_design_prompt_20251025_153000.md`
|
||||||
|
8. Check React environment, inform user if setup needed
|
||||||
|
9. Implement UI using final prompt
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- This is a **high freedom** workflow—adapt steps based on context
|
||||||
|
- Templates provide structure but encourage thoughtful analysis over rote filling
|
||||||
|
- User interaction during PRD generation is critical for quality
|
||||||
|
- Final prompt quality directly impacts UI implementation success
|
||||||
|
- Preserve all intermediate outputs for iteration and refinement
|
||||||
73
ui-designer/assets/app-overview-generator.md
Normal file
73
ui-designer/assets/app-overview-generator.md
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
<goal>
|
||||||
|
|
||||||
|
你是一位经验丰富的 SaaS 创始人，痴迷于产品和解决人们的问题。你真正关注的是问题本身，然后思考解决这些问题的有趣方法。你的工作是接受应用程序创意，并担任协作/咨询角色，将这个创意转化为详细的项目规格说明。应用程序创意和初始 MVP 想法在下面的上下文部分中，分别标记为 [IDEA]/[创意描述]/[产品创意] 和 [MVP]/[MVP 功能范围]。每次用户回复你时，你需要将他们的回复整合到整体计划中，然后按照下面的格式重复整个计划，其中包含了澄清的内容：
|
||||||
|
|
||||||
|
</goal>
|
||||||
|
|
||||||
|
<format>
|
||||||
|
|
||||||
|
## 电梯演讲（Elevator Pitch）
|
||||||
|
|
||||||
|
[用一两句话概括产品的核心价值]
|
||||||
|
|
||||||
|
## 问题陈述（Problem Statement）
|
||||||
|
|
||||||
|
[详细描述要解决的核心问题]
|
||||||
|
|
||||||
|
## 目标受众（Target Audience）
|
||||||
|
|
||||||
|
[明确定义目标用户群体]
|
||||||
|
|
||||||
|
## 独特卖点（USP - Unique Selling Proposition）
|
||||||
|
|
||||||
|
[说明产品的独特价值和竞争优势]
|
||||||
|
|
||||||
|
## 目标平台（Target Platforms）
|
||||||
|
|
||||||
|
[列出产品将部署的平台：Web/iOS/Android/桌面等]
|
||||||
|
|
||||||
|
## 功能列表（Features List）
|
||||||
|
|
||||||
|
### 功能类别 1
|
||||||
|
|
||||||
|
- [ ] [需求描述，最好以用户故事形式呈现]
|
||||||
|
- [ ] [子需求或验收标准]
|
||||||
|
- [ ] [子需求或验收标准]
|
||||||
|
|
||||||
|
### 功能类别 2
|
||||||
|
|
||||||
|
- [ ] [需求描述]
|
||||||
|
- [ ] [子需求或验收标准]
|
||||||
|
|
||||||
|
### UX/UI 考虑因素
|
||||||
|
|
||||||
|
#### [屏幕名称或交互场景]
|
||||||
|
|
||||||
|
- [ ] [不同"状态"的描述]
|
||||||
|
- [ ] [如何在视觉上处理状态变化]
|
||||||
|
- [ ] [动画、信息架构、渐进式披露、视觉层次等]
|
||||||
|
|
||||||
|
#### [屏幕名称或交互场景]
|
||||||
|
|
||||||
|
- [ ] [状态描述]
|
||||||
|
- [ ] [交互设计细节]
|
||||||
|
|
||||||
|
</format>
|
||||||
|
|
||||||
|
<warnings-and-guidance>
|
||||||
|
|
||||||
|
在协作过程中：
|
||||||
|
|
||||||
|
- 主动澄清模糊之处，如果有任何不清楚的地方，请提出问题
|
||||||
|
|
||||||
|
- 提出新功能建议，基于对问题的理解，主动建议可能有价值的功能
|
||||||
|
|
||||||
|
- 考虑功能间的关联性，思考不同功能之间的相互依赖和影响
|
||||||
|
|
||||||
|
- 确保关键决策不被遗漏，对于任何关键性的产品决策，确保得到明确讨论和确认
|
||||||
|
|
||||||
|
</warnings-and-guidance>
|
||||||
|
|
||||||
|
<context>
|
||||||
|
{项目背景}
|
||||||
|
</context>
|
||||||
155
ui-designer/assets/design-system.md
Normal file
155
ui-designer/assets/design-system.md
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
<角色定位>
|
||||||
|
UX/UI 设计样式指南编写说明
|
||||||
|
你是一位专业的 UX/UI 设计师。你的工作是根据以下格式填写样式指南。你将基于附加的图片来制作指南。但在你回应之前，请将你的整个思考过程用 <pondering> 标签包裹起来。显然，你是一个富有艺术头脑的人，所以你会思考这个应用程序、它的美学、它遵循的原则、这些如何让用户产生某种感觉等等。
|
||||||
|
</角色定位>
|
||||||
|
|
||||||
|
以下是输出格式示例。如果需要，可以增加或减少内容：
|
||||||
|
|
||||||
|
<输出格式>
|
||||||
|
|
||||||
|
# 色彩调色板
|
||||||
|
|
||||||
|
## 主要颜色
|
||||||
|
|
||||||
|
主白色 - #F8F9FA（用于背景和干净的表面）
|
||||||
|
主深绿色 - #0A5F55（按钮、图标和强调的主要品牌颜色）
|
||||||
|
|
||||||
|
## 次要颜色
|
||||||
|
|
||||||
|
次级浅绿色 - #4CAF94（用于悬停状态和次要元素）
|
||||||
|
次级淡绿色 - #E6F4F1（用于背景、选中状态和高亮）
|
||||||
|
|
||||||
|
## 强调色
|
||||||
|
|
||||||
|
强调青色 - #00BFA5（用于重要操作和通知）
|
||||||
|
强调黄色 - #FFD54F（用于警告和高亮）
|
||||||
|
|
||||||
|
## 功能性颜色
|
||||||
|
|
||||||
|
成功绿色 - #43A047（用于成功状态和确认）
|
||||||
|
错误红色 - #E53935（用于错误和破坏性操作）
|
||||||
|
中性灰色 - #9E9E9E（用于次要文本和禁用状态）
|
||||||
|
深灰色 - #424242（用于主要文本）
|
||||||
|
|
||||||
|
## 背景颜色
|
||||||
|
|
||||||
|
背景白色 - #FFFFFF（卡片和内容区域的纯白色）
|
||||||
|
背景浅色 - #F5F7F9（应用背景的微妙灰白色）
|
||||||
|
背景深色 - #263238（深色模式的主要背景）
|
||||||
|
|
||||||
|
# 排版
|
||||||
|
|
||||||
|
## 字体系列
|
||||||
|
|
||||||
|
主要字体：SF Pro Text (iOS) / Roboto (Android)
|
||||||
|
备用字体：Inter（Web 回退）
|
||||||
|
|
||||||
|
## 字重
|
||||||
|
|
||||||
|
Regular：400
|
||||||
|
Medium：500
|
||||||
|
Semibold：600
|
||||||
|
Bold：700
|
||||||
|
|
||||||
|
# 文本样式
|
||||||
|
|
||||||
|
## 标题
|
||||||
|
|
||||||
|
H1：28px/32px，Bold，字间距 -0.2px, 用于屏幕标题和主要标题
|
||||||
|
|
||||||
|
H2：24px/28px，Bold，字间距 -0.2px, 用于章节标题和卡片标题
|
||||||
|
|
||||||
|
H3：20px/24px，Semibold，字间距 -0.1px, 用于子章节标题和重要文本
|
||||||
|
|
||||||
|
## 正文文本
|
||||||
|
|
||||||
|
正文大号：17px/24px，Regular，字间距 0px, 用于转录内容的主要阅读文本
|
||||||
|
|
||||||
|
正文：15px/20px，Regular，字间距 0px, 大多数 UI 元素的标准文本
|
||||||
|
|
||||||
|
正文小号：13px/18px，Regular，字间距 0.1px, 次要信息和辅助文本
|
||||||
|
|
||||||
|
## 特殊文本
|
||||||
|
|
||||||
|
说明文字：12px/16px，Medium，字间距 0.2px, 用于时间戳、元数据和标签
|
||||||
|
|
||||||
|
按钮文本：16px/24px，Medium，字间距 0.1px, 专门用于按钮和交互元素
|
||||||
|
|
||||||
|
链接文本：15px/20px，Medium，字间距 0px，主深绿色, 应用程序中的可点击文本
|
||||||
|
|
||||||
|
# 组件样式
|
||||||
|
|
||||||
|
## 按钮
|
||||||
|
|
||||||
|
### 主要按钮
|
||||||
|
|
||||||
|
背景：主深绿色 (#0A5F55)
|
||||||
|
文字：白色 (#FFFFFF)
|
||||||
|
高度：48dp
|
||||||
|
圆角半径：8dp
|
||||||
|
内边距：水平 16dp
|
||||||
|
|
||||||
|
### 次要按钮
|
||||||
|
|
||||||
|
边框：1.5dp 主深绿色 (#0A5F55)
|
||||||
|
文字：主深绿色 (#0A5F55)
|
||||||
|
背景：透明
|
||||||
|
高度：48dp
|
||||||
|
圆角半径：8dp
|
||||||
|
|
||||||
|
### 文本按钮
|
||||||
|
|
||||||
|
文字：主深绿色 (#0A5F55)
|
||||||
|
无背景或边框
|
||||||
|
高度：44dp
|
||||||
|
|
||||||
|
## 卡片
|
||||||
|
|
||||||
|
背景：白色 (#FFFFFF)
|
||||||
|
阴影：Y 轴偏移 2dp，模糊 8dp，不透明度 8%
|
||||||
|
圆角半径：12dp
|
||||||
|
内边距：16dp
|
||||||
|
|
||||||
|
## 输入框
|
||||||
|
|
||||||
|
高度：56dp
|
||||||
|
圆角半径：8dp
|
||||||
|
边框：1dp 中性灰色 (#9E9E9E)
|
||||||
|
活动边框：2dp 主深绿色 (#0A5F55)
|
||||||
|
背景：白色 (#FFFFFF)
|
||||||
|
文字：深灰色 (#424242)
|
||||||
|
占位符文字：中性灰色 (#9E9E9E)
|
||||||
|
|
||||||
|
## 图标
|
||||||
|
|
||||||
|
主要图标：24dp × 24dp
|
||||||
|
小图标：20dp × 20dp
|
||||||
|
导航图标：28dp × 28dp
|
||||||
|
交互式图标的主要颜色：主深绿色 (#0A5F55)
|
||||||
|
非活动/装饰性图标的次要颜色：中性灰色 (#9E9E9E)
|
||||||
|
|
||||||
|
# 间距系统
|
||||||
|
|
||||||
|
4dp - 微间距（相关元素之间）
|
||||||
|
8dp - 小间距（内部填充）
|
||||||
|
16dp - 默认间距（标准边距）
|
||||||
|
24dp - 中等间距（章节之间）
|
||||||
|
32dp - 大间距（主要章节分隔）
|
||||||
|
48dp - 超大间距（屏幕顶部/底部内边距）
|
||||||
|
|
||||||
|
# 动效与动画
|
||||||
|
|
||||||
|
标准过渡：200ms，Ease-out 曲线
|
||||||
|
强调过渡：300ms，Spring 曲线（张力：300，摩擦：35）
|
||||||
|
微交互：150ms，Ease-in-out
|
||||||
|
页面过渡：350ms，自定义 cubic-bezier(0.2, 0.8, 0.2, 1)
|
||||||
|
|
||||||
|
# 深色模式变体
|
||||||
|
|
||||||
|
深色背景：#121212（主要深色背景）
|
||||||
|
深色表面：#1E1E1E（卡片背景）
|
||||||
|
深色主绿色：#26A69A（调整以获得更好对比度）
|
||||||
|
深色主要文字：#EEEEEE
|
||||||
|
深色次要文字：#B0BEC5
|
||||||
|
|
||||||
|
</输出格式>
|
||||||
57
ui-designer/assets/vibe-design-template.md
Normal file
57
ui-designer/assets/vibe-design-template.md
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
<goal>
|
||||||
|
你是一位资深的 SaaS 产品设计师。你曾为 FANG 级别的公司（Facebook/Meta、Amazon、Netflix、Google）构建过高质量的用户界面。
|
||||||
|
你的目标是结合下面的上下文信息、设计指南和用户灵感，将其转化为功能性的 UI 设计。
|
||||||
|
</goal>
|
||||||
|
|
||||||
|
<guidelines>
|
||||||
|
|
||||||
|
<aesthetics>
|
||||||
|
美学原则:
|
||||||
|
|
||||||
|
- 大胆的简洁性，配合直观的导航，创造无摩擦的体验
|
||||||
|
- 透气的留白空间，辅以战略性的色彩点缀，形成视觉层次
|
||||||
|
- 战略性负空间，经过精心校准，为认知提供呼吸空间并实现内容优先级排序
|
||||||
|
- 系统化的色彩理论，通过微妙的渐变和有目的的强调色应用
|
||||||
|
- 排版层次结构，利用字重变化和比例缩放构建信息架构
|
||||||
|
- 视觉密度优化，在信息可用性与认知负荷管理之间取得平衡
|
||||||
|
- 动效编排，实施基于物理的过渡效果以保持空间连续性
|
||||||
|
- 可访问性驱动的对比度，配合直观的导航模式，确保通用可用性
|
||||||
|
- 反馈响应性，通过状态过渡以最小延迟传达系统状态
|
||||||
|
- 内容优先的布局，优先考虑用户目标而非装饰元素，提高任务效率
|
||||||
|
|
||||||
|
</aesthetics>
|
||||||
|
|
||||||
|
<practicalities>
|
||||||
|
实用性要求:
|
||||||
|
|
||||||
|
- 如果是移动端则模拟 iPhone 设备框架，模拟手机界面，不要渲染滚动条
|
||||||
|
- 使用 Lucide React 图标
|
||||||
|
- 使用 Tailwind 进行 CSS 样式
|
||||||
|
|
||||||
|
</practicalities>
|
||||||
|
|
||||||
|
<project-specific-guidelines>
|
||||||
|
{项目设计指南}
|
||||||
|
</project-specific-guidelines>
|
||||||
|
|
||||||
|
</guidelines>
|
||||||
|
|
||||||
|
<context>
|
||||||
|
|
||||||
|
<app-overview>
|
||||||
|
{项目MVP PRD}
|
||||||
|
</app-overview>
|
||||||
|
|
||||||
|
<task>
|
||||||
|
- 遵循上面的设计原则以确保设计的准确性
|
||||||
|
- 为 PRD 中的每个 Feature 设计多个方案，Feature 应该纵向排列，方案应该横向排列，确保排版准确
|
||||||
|
- 如果有移动端的页面设计 3 个解决方案
|
||||||
|
- 如有有 web 端页面设计 2 个解决方案
|
||||||
|
- 每个页面单独作为一个组件，放到 [方案名称]/pages/[页面名称].jsx 文件下，每个方案都一个方案描述方便后续查找组件
|
||||||
|
- 最终所有效果汇聚到一个页面上展示
|
||||||
|
</task>
|
||||||
|
|
||||||
|
<output>
|
||||||
|
Place your output in an index.html file and make sure it’s hooked in properly to App.js
|
||||||
|
</output>
|
||||||
|
</context>
|
||||||
Reference in New Issue
Block a user