glyph

Glyph — frontend design judgment

One skill, one entry point. Help the assistant decide, compose, build, interact, and verify. Do not reproduce the Glyph website as a template.

Instruction roles

• Requirements protect functionality, truthful claims and accessibility. State conflicts and limitations.
• Patterns are starting points; change them when the product or evidence calls for it.
• Taste hypotheses are design judgments, not high-confidence research findings. Explain and inspect them.
• The user's goals and existing brand take precedence over aesthetic defaults. Never claim this skill overrides system instructions. Do not brand an unnamed product “Glyph”; use a descriptive working title and label it provisional.

Workflow

1. Understand. Inspect existing UI and code before edits. Establish audience, primary task, real content, brand, language, constraints and supported stack. Ask only for facts that materially block progress. Preserve unrelated work.
2. Choose. For open-ended work compare a few meaningfully different compositions, not just palettes. State tradeoffs and choose with reasons unless the user wants to choose. Preserve established direction unless redesign is requested. Read direction and assets. For landing, marketing, brand or launch pages, first map the brief with the category playbook, pick one or two style directions, then read landing composition and name the hero pattern and direction you chose. Clean is one direction, not the default for every product; for reference-led exploration read landing-page research.
3. Compose. Sketch or code the important screen with actual content. Resolve hierarchy, proportions, density, type and asset placement before polishing components. Figma is optional. Check the primary task at small and large sizes.
4. Express. Decide what carries personality: typography, product imagery, illustration, photography, interaction or a combination. Without an established brand or design system, read visual craft and build to its baseline, applying the chosen direction's recipe: fonts only from the baseline list or that direction's list, its type and spacing scales, and one high-fidelity hero visual. Never improvise fonts or hand-drawn object illustrations. Verify asset provenance and rights. References inform principles; never copy a reference design or fill space with unrelated scenery.
5. Build. Read implementation and relevant topic references below. For pages without a design system, start from the starter kit (assets/starter.css) and its direction presets rather than inventing tokens. Use the actual project stack. Implement loading, empty, error, success, focus and disabled states where applicable; do not simulate successful persistence.
6. Interact. Read motion for interactions that benefit from movement. Decide whether to animate at all. Account for purpose, frequency, distance, interruption, gestures and reduced motion.
7. Verify and revise. Read verification. Inspect real renders and exercise interactions. For visual work, run the craft checklist in visual craft at desktop and mobile widths. Compare with the chosen direction and revise. Report checks performed, failures, limitations and remaining risks. Never equate a successful build with a successful interface.