SKILL34Frontend
Implementing Reference-Faithful UI
Translates visual evidence into responsive interface geometry, typography, surfaces, assets, and states through render-and-compare iteration.
Primary benefit
Produces an implementation that preserves measurable reference fidelity across desktop and mobile.When to use
Use when implementing a UI from Figma, screenshots, mockups, or an existing visual reference and fidelity to layout, spacing, typography, crops, and states is a primary acceptance criterion.
When not to use
Do not use for open-ended visual invention or when no reference-backed fidelity criterion exists.
Use cases
Recreate a supplied desktop and mobile design
Correct layout, typography, and crop differences through visual comparison
Example prompts
Use implementing-reference-faithful-ui to build this interface from the supplied reference and verify the largest visual deltas first.Install this skill
Choose the command for your operating system and run it from the repository root.
Bash
./install.sh --skill implementing-reference-faithful-uiPowerShell
./install.ps1 --skill implementing-reference-faithful-uiChatGPT
Download Skill ZIPCompatibility
- Surfaces
- ChatGPT · Codex · Claude Code
- Operating systems
- Linux · macOS · Windows
- Install modes
- PluginFilesystem
Dependencies
No external dependencies
Part of systems
Curated systems that canonically include this method.