| name | refero-web-design |
| description | Website and product UI design workflow using Refero-style reference research. Use for web design, redesign, landing pages, SaaS pages, dashboards, pricing pages, and frontend visual polish. |
| version | 1.0.0 |
| license | MIT |
| metadata | {"hermes":{"tags":["refero","design","web-design","ui","landing-pages","frontend","workshop"],"related_skills":["hallmark","webd","taste-skill"]}} |
Refero Web Design
Use this skill to make web UI look researched, intentional, and implementation-ready instead of generic AI output.
Workflow
- Build a brief: product, audience, primary action, constraints, tone, and conversion/usability risk.
- Research references. If Refero MCP tools are available, search styles/screens/flows first. If not, use web examples or supplied references.
- Lock one dominant direction. Do not average unrelated references.
- Decide tokens: typography, color, spacing, surfaces, motion, components.
- Produce an implementation-ready spec or code changes.
- Verify with anti-slop, responsive, accessibility, and screenshot/build checks when code changes.
Output contract
- brief;
- reference summary;
- reference lock;
- decision ledger;
- deliverable: spec, HTML/CSS/React, critique, or prototype;
- verification result.
Credential boundary
Refero tokens or MCP credentials must live in local environment/config, never in this repository or skill text.
