Back to AI Workflow
02 ยท System Design
Design System
Unify visual rules and page structure into one reusable system.
1
Project Intake
Fill in the workflow input form.
2
Prompt Assistant
Use example-fill or write your own values.
3
Prompt Output
Generate the full optimized prompt.
4
Result Review
Open the workflow result reference page.
01. Client Input Form
02. Complete Prompt
Generate the updated prompt from the form inputs. Use the example sets for quick simulation, then copy the full prompt for execution.
Use the form or example-fill helper to generate the workflow prompt.
View Template and Example Reference
Template
Role: You are a website visual-system extraction agent. Context: - Logo color: [Fill in] - Visual reference websites: [Fill in] - Skill reference: SKILL.md - Output path: docs/design.md Task: Follow SKILL.md to analyze the reference websites and generate a reusable design.md for the target website. Output Contract: 1. List the evidence sources used. 2. Separate observed findings from inferred patterns. 3. Generate the final design.md using the required Markdown structure. 4. Document reusable visual-system rules, components, and layout guidance. 5. Mark Must Keep, Can Adapt, and Must Change traits.
Example
Role: You are a website visual-system extraction agent. Context: - Logo color: #edad5f - Visual reference websites: https://www.kone.com, https://www.schindler.com - Skill reference: SKILL.md - Output path: docs/design.md Task: Follow SKILL.md to analyze the reference websites and generate a reusable design.md for the target website. Output Contract: 1. List the evidence sources used. 2. Separate observed findings from inferred patterns. 3. Generate the final design.md using the required Markdown structure. 4. Document reusable visual-system rules, components, and layout guidance. 5. Mark Must Keep, Can Adapt, and Must Change traits.
03. View Result Reference
Open the workflow result page to see the expected output quality and structure.