64 lines
2.1 KiB
Markdown
64 lines
2.1 KiB
Markdown
---
|
|
description: Analyze a Stitch project and synthesize its design system into a .stitch/DESIGN.md file.
|
|
---
|
|
|
|
# Workflow: Generate .stitch/DESIGN.md
|
|
|
|
Create a "source of truth" for your project's design language to ensure consistency across all future screens.
|
|
|
|
## 📥 Retrieval
|
|
|
|
To analyze a Stitch project, you must retrieve metadata and assets using the Stitch MCP tools:
|
|
|
|
1. **Project lookup**: Use `list_projects` to find the target `projectId`.
|
|
2. **Screen lookup**: Use `list_screens` for that `projectId` to find representative screens (e.g., "Home", "Main Dashboard").
|
|
3. **Metadata fetch**: Call `get_screen` for the target screen to get `screenshot.downloadUrl` and `htmlCode.downloadUrl`.
|
|
4. **Asset download**: Use `read_url_content` to fetch the HTML code.
|
|
|
|
## 🧠 Analysis & Synthesis
|
|
|
|
### 1. Identify Identity
|
|
- Capture Project Title and Project ID.
|
|
|
|
### 2. Define Atmosphere
|
|
- Analyze the HTML and screenshot to capture the "vibe" (e.g., "Airy," "Professional," "Vibrant").
|
|
|
|
### 3. Map Color Palette
|
|
- Extract exact hex codes and assign functional roles (e.g., "Primary Action: #2563eb").
|
|
|
|
### 4. Translate Geometry
|
|
- Convert Tailwind/CSS values into descriptive language (e.g., `rounded-full` → "Pill-shaped").
|
|
|
|
### 5. Document Depth
|
|
- Describe shadow styles and layering (e.g., "Soft, diffused elevation").
|
|
|
|
## 📝 Output Structure
|
|
|
|
Create a `.stitch/DESIGN.md` file in the project directory with this structure:
|
|
|
|
```markdown
|
|
# Design System: [Project Title]
|
|
**Project ID:** [Insert Project ID Here]
|
|
|
|
## 1. Visual Theme & Atmosphere
|
|
(Description of mood and aesthetic philosophy)
|
|
|
|
## 2. Color Palette & Roles
|
|
(Descriptive Name + Hex Code + Role)
|
|
|
|
## 3. Typography Rules
|
|
(Font families, weights, and usage)
|
|
|
|
## 4. Component Stylings
|
|
* **Buttons:** Shape, color, behavior
|
|
* **Containers:** Roundness, elevation
|
|
|
|
## 5. Layout Principles
|
|
(Whitespace strategy and grid alignment)
|
|
```
|
|
|
|
## 💡 Best Practices
|
|
- **Be Precise**: Always include hex codes in parentheses.
|
|
- **Be Descriptive**: Use natural language like "Deep Ocean Blue" instead of just "Blue".
|
|
- **Be Functional**: Explain *why* an element is used.
|