refero-web-design

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

1. Build a brief: product, audience, primary action, constraints, tone, and conversion/usability risk.
2. Research references. If Refero MCP tools are available, search styles/screens/flows first. If not, use web examples or supplied references.
3. Lock one dominant direction. Do not average unrelated references.
4. Decide tokens: typography, color, spacing, surfaces, motion, components.
5. Produce an implementation-ready spec or code changes.
6. 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.