screen-coder
Converts UI screenshots and design mockups into production-ready HTML/CSS code. Multi-agent architecture analyzes layout, plans structure, generates clean code. Use when you have a design image and need code. Don't use for code-to-code tasks.
Source facts
- Repository
- neuron-one/GODMODE
- Last source activity
- April 1, 2026 at 10:58
- Detected SKILL.md language
- English
- Stars
- 38
- Forks
- 11
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- screen-coder
- description
- Converts UI screenshots and design mockups into production-ready HTML/CSS code. Multi-agent architecture analyzes layout, plans structure, generates clean code. Use when you have a design image and need code. Don't use for code-to-code tasks.
- disable-model-invocation
- true
- model
- opus
- effort
- high
- allowed-tools
- Read, Write, Bash, Glob
- argument-hint
- ["path-to-screenshot"]
# ScreenCoder — Screenshot to Code
Convert a UI design screenshot into production-ready code.
## Process:
1. Analyze the screenshot layout and visual structure
2. Identify all UI components (buttons, cards, inputs, navigation)
3. Plan HTML structure and CSS approach
4. Generate clean, editable HTML + CSS/Tailwind code
5. Ensure responsive design
## Input: $ARGUMENTS (path to screenshot image)
## Output:
- Clean HTML file
- Tailwind CSS classes (preferred) or separate CSS
- Component structure matching the design
## Rules:
- Match the design as closely as possible
- Use semantic HTML elements
- Mobile-first responsive approach
- Use existing component patterns from the project if available
## Reference: https://github.com/leigest519/ScreenCoder
View on GitHub