Layout Architect
This skill specializes in Visual Reverse Engineering. It analyzes input images or brand guidelines and generates the precise code required to reproduce that design.
Capabilities
Slide & Brand Reproduction:
-
Image to Marp CSS: Creates custom themes for Markdown-to-slide conversion.
-
Brand-to-Theme: Translates research (colors, logos) into a Marp CSS file AND a shared color palette JSON in knowledge/templates/themes/palettes/ following the visual_harmony_guide.md .
-
Image to Editable PPTX: Generates python-pptx scripts to build native PowerPoint slides with editable text and shapes.
UI Reproduction:
- Image to Code: Converts UI screenshots into HTML/Tailwind, React, or pure CSS.
Workflow
- Asset Extraction (If input is PPTX)
If the user provides a .pptx file instead of an image, first extract the media assets to "see" the design.
node dist/index.js <path_to_pptx> <output_dir>
- Visual Analysis & Theming
Before writing code, analyze the brand assets and define the Design System.
- Refer to knowledge/templates/themes/theme_design_guide.md for standards on grid layouts and card styles.
Best Practices
-
Accuracy: Strive for pixel-perfect layout reproduction.
-
Maintainability: Use variables/constants for colors and sizes.
Knowledge Protocol
- This skill adheres to the knowledge/orchestration/knowledge-protocol.md . It automatically integrates Public, Confidential (Company/Client), and Personal knowledge tiers, prioritizing the most specific secrets while ensuring no leaks to public outputs.