Frontend Design
A distinctive visual direction
Look for this
A clear starting point
Before: A generic welcome leads the page.
After: The homepage decision becomes the headline.
Colour with a job
Before: Cards and accents compete for attention.
After: Cobalt draws the eye to the decision and review action.
An obvious next step
Before: Actions sit below a busy overview.
After: Prepare review sits beside the work it moves forward.
The output produced using this skill’s instructions.
Best fit. Bring a clear subject and audience for a new interface; use your existing implementation tools.
Prompt, source & limitations
The difference
What changed
Subject-led hierarchy
Used the skill’s compact palette/type/layout planning pass; replaced the generic welcome with the concrete homepage approval.
One expressive element
A cobalt decision area and white Prepare review action carry the visual identity; blue review states connect the work while the appointment stays secondary.
Literal actions
Prepare review opens a real local summary, View all tasks reaches the list, and the blocked row discloses awaiting content.
Open notebook
Behind this example
Read the original SKILL.md, wrote and reviewed a compact design plan, then implemented the standalone result. No executable skill runtime is supplied by this source.
The prompt and input
Apply frontend-design to the fictional Forma weekly project overview in tests/fixtures/skill-lab/brief.md and baseline.html. Preserve Studio website, Friday 10:00 review, the three named work items and owners/statuses, 6 of 10 tasks complete, one blocked item awaiting content, and the next homepage-direction decision. Keep Prepare review and View all tasks. Deliver standalone responsive HTML for 960×640 and 390×640 with local interactions, visible focus and reduced-motion handling. No external services, network dependencies, uploads or deployment. Use the original pinned skill instructions and relevant references; disclose adaptations and limitations.
Input: tests/fixtures/skill-lab/brief.md
Forma and its research notes are fictional demonstration inputs.
Source files used 1
Repository files use the recorded revision. Any linked external rulebook was fetched separately; hashes identify the exact contents read.
- skills/frontend-design/SKILL.md ↗
SHA-256 d91970639e9f5c37682ac7ab60094d35f1c7c1f38d731bd56396563aee10c1d3
What this example does not establish
- One instruction-guided demonstration using fictional product data; not a controlled comparison or benchmark.
- Standalone HTML with local state only; no persistence, backend, deployment or native plugin execution.
- System fonts replace the skill’s broader font-sourcing possibilities to keep the HTML fully offline.
- Colour and hierarchy received a subsequent source-guided refinement on 2026-10-21; the original prompt, source pin and execution date are preserved.