skills.rest
rethinkhealth
rethinkhealthOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

Plan and implement frontend designs using existing design tokens and screenshot verification.

6|Updated Jan 29, 2023
Search Tags:#typography#design#accessibility#frontend#color#motion#design-systems
One-click install
npx skills add https://github.com/rethinkhealth/glion --skill frontend-design-rethinkhealth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/rethinkhealth/glion/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/rethinkhealth/glion --skill frontend-design-rethinkhealth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guide creation of distinctive, production-grade frontend interfaces that respect existing design systems and avoid AI slop. This skill helps teams maintain consistency, elevate visual quality, and accelerate UI delivery.

Core Features & Use Cases

  • Detect existing design signals (tokens, typography, color, layout) and align work with the project's design system.
  • Plan, implement, and validate frontend interfaces across greenfield builds or modifications to existing apps.
  • Verify results via screenshots to ensure visual parity with the intended design and accessibility standards.

Quick Start

Describe the existing design system, plan the design, implement the UI, and verify results with a screenshot.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a frontend interface that respects an existing design system?▼

To build a frontend interface that respects an existing design system, describe your established design tokens, typography, and color palette so the implementation aligns with those signals and maintains project consistency.

What is the best way to apply design tokens and typography in a production-grade UI?▼

The best way to apply design tokens and typography in a production-grade UI is to map existing design signals directly to your layout, ensuring visual consistency and avoiding generic AI slop during the planning phase.

Can I modify an established codebase while maintaining visual accessibility standards?▼

You can modify an established codebase while maintaining visual accessibility standards by applying your existing design system and verifying the results through screenshot-based checks to ensure visual parity and compliance.

How do I verify visual parity when implementing frontend designs?▼

You verify visual parity when implementing frontend designs by using screenshot-based checks after applying your design tokens, typography, and layout to ensure the output matches the intended visual quality.

Does this approach work for both greenfield projects and modifications to existing apps?▼

This approach works for both greenfield projects and modifications to existing apps by detecting existing design signals or planning new ones, then executing and validating the frontend interface accordingly.

Related Skills

Explore More Design & Creative Skills→
ncsound919ncsound919

visual-design-foundations

Standardize typography, color, spacing, and iconography into design tokens and guidelines.

Community
Advanced
TheSoftwareHouseTheSoftwareHouse
282

ui-verification

Compare implemented interfaces against Figma designs and generate structured verification reports.

Official
Advanced
deomiarndeomiarn

framer-animations

Automate Framer Motion micro-animations for section reveals, staggered lists, and hover interactions.

Community
Intermediate
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate