team-shinchan:design-review
npx machina-cli add skill seokan-jeong/team-shinchan/design-review --openclawFiles (1)
SKILL.md
3.1 KB
EXECUTE IMMEDIATELY
Step 1: Validate Input
If args is empty or only whitespace:
Ask user: "Please provide the design mockup image path and the implementation file/directory path.
Example: /team-shinchan:design-review './mockup.png' './src/components/Login.tsx'"
STOP and wait for user response
If args length > 2000 characters:
Truncate to 2000 characters
Warn user: "Request was truncated to 2000 characters"
Step 2: Execute Task
Do not read further. Execute this Task NOW:
Task(
subagent_type="team-shinchan:ume",
model="sonnet",
prompt=`/team-shinchan:design-review has been invoked.
## Design-Implementation Comparison Request
You are performing a **Design Fidelity Review** — comparing a design mockup against its implementation to find mismatches.
### Workflow
1. **Analyze the design mockup image**: Read the image file provided. Extract a full Design Spec using your Design Spec Extraction workflow (Components, Colors, Typography, Layout, Interactions with confidence levels).
2. **Analyze the implementation**: Read the implementation source code (or screenshot if provided). Identify the implemented components, styles, layout structure, and interaction handlers.
3. **Compare and report mismatches**: For each Design Spec category, compare against the implementation and report:
### Output Format
\`\`\`markdown
## Design Fidelity Report
### Design Spec (from mockup)
{Full Design Spec output}
### Implementation Analysis
- Files analyzed: {list}
- Framework detected: {React/Vue/Angular/HTML/etc.}
- Components found: {list}
### Comparison Results
| Category | Design Spec | Implementation | Status |
|----------|-------------|----------------|--------|
| Components | {from spec} | {from code} | MATCH / MISMATCH / PARTIAL |
| Colors | {from spec} | {from code} | MATCH / MISMATCH / PARTIAL |
| Typography | {from spec} | {from code} | MATCH / MISMATCH / PARTIAL |
| Layout | {from spec} | {from code} | MATCH / MISMATCH / PARTIAL |
| Interactions | {from spec} | {from code} | MATCH / MISMATCH / PARTIAL |
### Mismatches Found
1. **{Category}**: Expected {spec value} but found {implementation value}
- File: {path:line}
- Suggested fix: {actionable suggestion}
### Summary
- Total categories: 5
- Matches: {N}
- Mismatches: {N}
- Partial: {N}
- Overall fidelity: {FAITHFUL / MINOR_DEVIATIONS / NEEDS_REVISION}
\`\`\`
### Important Notes
- For low-confidence Design Spec values, note them as "approximate — verify with designer"
- Search the codebase with Grep to find related component files
- If only a design image is provided (no implementation path), just produce the Design Spec
- If only implementation code is provided (no design image), report what you can analyze
User request: ${args || '(Please provide design mockup and implementation paths)'}
`
)
STOP HERE. The above Task handles everything.
Source
git clone https://github.com/seokan-jeong/team-shinchan/blob/main/skills/design-review/SKILL.mdView on GitHub Overview
Team shinchan design-review compares design mockups with the actual implementation to detect UI mismatches. It helps teams enforce design fidelity during reviews and handoffs by surfacing where components, colors, typography, layout, or interactions diverge from the mockups.
How This Skill Works
The tool analyzes a design mockup image to extract a full design spec (components, colors, typography, layout, interactions), then analyzes the implementation files or rendered UI to identify corresponding elements. It produces a Design Fidelity Report that details matches, mismatches, and actionable fixes across design spec categories.
When to Use It
- Before handing off a design to developers to validate fidelity against the mockup
- During design reviews or design QA to catch UI mismatches early
- When QA reports visual regressions or layout/spacing issues
- When implementing a new feature from a design spec and you want automated checks
- When updating a design and needing to verify alignment with code
Quick Start
- Step 1: Provide the design mockup image path and the implementation file or directory path
- Step 2: Run team-shinchan:design-review to generate the Design Fidelity Report
- Step 3: Review the report, apply fixes, and re-run as needed
Best Practices
- Provide both the design mockup image path and the implementation file or directory path
- Run the check across all relevant UI aspects: components, colors, typography, layout, and interactions
- Review the Design Fidelity Report and document fixes or design gaps
- Note low-confidence spec values as approximate and confirm with the designer
- Grep the codebase to locate related components and verify sources
Example Use Cases
- Login screen mockup versus Login.tsx showing color and typographic deviations
- Dashboard grid alignment mismatch between mockup and implemented layout
- Typography sizing or line-height inconsistency across a modal
- Missing hover/interaction states not implemented in code
- Color palette/contrast differences vs the design spec
Frequently Asked Questions
Add this skill to your agents