skills.rest
firatcand
firatcandCOMMUNITY
Explore all skills by this author →
𝕏@firatcandGitHub

design

Generate UI audits, design system specs, and brand identity guidelines grounded in WCAG and Gestalt principles.

39|4|Updated Apr 13, 2026
Search Tags:#typography#design system#brand identity#color palette#wcag#gestalt#ui audit
One-click install
npx skills add https://github.com/firatcand/founder-skills --skill design-firatcand
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/firatcand/founder-skills/tree/main/design
Command: npx skills add https://github.com/firatcand/founder-skills --skill design-firatcand

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Non-designers often struggle to make confident visual decisions — audits devolve into vague taste-based feedback, specs lack concrete values, and brand foundations get improvised. This Skill grounds every recommendation in named principles (WCAG 2.2, Gestalt, 60-30-10, Atomic Design) with specific values in px, ratios, and contrast numbers. ## Core Features & Use Cases - UI/UX Audits: Severity-ranked critique of screenshots, URLs, or descriptions covering the visual layer (spacing, type, color, grid) and perceptual layer (affordance, hierarchy, cognitive load), ending with quick wins. - Design Spec Generation: Structured specs for spacing scales, typography systems (modular ratios, font pairing), color palettes (tokens, light/dark pairs, WCAG verification), and grids. - Brand Foundations: Logo systems, palette and type pairing, and full brand guidelines built on the 60-30-10 rule and named-token architecture. - Use Case: A founder shares a landing page screenshot that "feels off" — the Skill diagnoses a broken proximity ratio and weak hierarchy, then prescribes exact spacing values (8px in-group, 24px between-group) and a 3-level type scale fix. ## Quick Start Ask the agent to audit your landing page UI and give severity-ranked fixes with concrete spacing, typography, and contrast values.

Frequently Asked Questions about design

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

FAQPage Schema
How do I audit a UI design without a designer?▼

Provide a screenshot, URL, or description of the interface and request an audit. The evaluation follows the priority hierarchy Accessibility, Clarity, Consistency, Brand Expression, Novelty, returning severity-ranked issues with the violated principle and a concrete fix for each.

How to create a design system spec with spacing and typography tokens?▼

Request a spec for the artifact you need — spacing scale, type system, color palette, or grid. The output is structured markdown with exact values, named tokens, and rationale, defaulting to an 8px spacing system and modular type ratios like 1.25 for product UIs.

What contrast ratio does WCAG 2.2 require for text?▼

WCAG 2.2 Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold), plus 3:1 for non-text UI components. The Skill verifies these thresholds in every color palette and audit it produces.

Can this generate production CSS or React code from a design spec?▼

No, it produces audits, specs, and brand foundations — the why and what, not implementation code. For implementing designs in React, HTML, or CSS, it hands off to the separate frontend-design skill.

When should I use a larger type scale ratio for typography?▼

Use smaller ratios like Minor Third (1.20) or Major Third (1.25) for product UIs where smooth label-to-heading transitions matter. Reserve larger ratios like Perfect Fourth (1.333) for marketing pages and hero headlines needing dramatic hierarchy.

Related Skills

Explore More Design & Creative Skills→
Fantasia1999Fantasia1999

marketing-context

Create and update marketing context documents for brand voice and positioning.

Community
Advanced
CristoVenturesCristoVentures
2

design-implementation-reviewer

Compare live frontend implementations to Figma designs and generate discrepancy reports.

Official
Advanced
rampstackcorampstackco
523

cro-optimization

Audit funnels and generate data-driven hypotheses for A/B testing.

Official
Advanced
fefogarciafefogarcia
1

carbon-design-system

Develop user interfaces with IBM's Carbon Design System v11.

Community
Intermediate