skills.rest
linenoize
linenoizeCOMMUNITY
Explore all skills by this author →
GitHub

design

Transform product descriptions into design systems with color, typography, layout, and UX rules.

1|Updated May 18, 2026
Search Tags:#typography#accessibility#design system#color palette#ux writing#ui styling
One-click install
npx skills add https://github.com/linenoize/topia --skill design-linenoize
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/linenoize/topia/tree/main/skills/design
Command: npx skills add https://github.com/linenoize/topia --skill design-linenoize

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns vague product ideas into a concrete UI direction so teams do not default to generic, inconsistent, or inaccessible designs. It establishes the visual rules, interaction patterns, and anti-pattern guardrails that keep AI-generated interfaces intentional and human-quality.

Core Features & Use Cases

  • Domain-to-style reasoning: Maps a product type such as SaaS, developer tools, healthcare, or marketing into an appropriate visual language.
  • Design contract generation: Produces a shared design system and UI specification that downstream build and review workflows can follow consistently.
  • Accessibility and anti-pattern enforcement: Bakes in contrast, motion safety, scale minimums, and “do not do this” rules to prevent common AI UI mistakes.
  • Use case: Start a new web app, refresh an outdated interface, or review an existing product for design drift and accessibility gaps.

Quick Start

Use the design skill to analyze the product, choose an opinionated visual direction, and generate the shared design contract for the interface.

Frequently Asked Questions about design

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

FAQPage Schema
How do I generate a design system from a product description?▼

Generate a design system by analyzing a product description to establish domain-specific color, typography, layout, and UX writing rules. This process outputs an implementation-ready design contract with anti-pattern guardrails for consistent UI styling across web, iOS, and Android platforms.

Can I enforce accessibility rules like contrast and motion safety in a UI design system?▼

You can enforce accessibility in a UI design system by baking in contrast ratios, motion safety, and scale minimums. The generated design contract establishes these accessibility rules alongside anti-pattern guardrails to prevent common AI interface mistakes.

What is the best way to prevent design drift and inconsistent UI styling in a redesign?▼

The best way to prevent design drift is by generating a shared design contract that defines domain-specific style decisions and anti-pattern guardrails. This establishes strict UI styling and layout rules, ensuring downstream workflows maintain consistent visual direction.

Does this design system generation tool work for multi-platform products like iOS and Android?▼

This design system generation works for multi-platform products including web, iOS, and Android. It maps domain-specific product types into appropriate visual languages, producing consistent design contracts and UI specifications tailored for each platform's interaction patterns.

How do I map a product type like SaaS or healthcare to an appropriate visual language?▼

Map a product type to a visual language through domain-to-style reasoning, which translates SaaS, developer tools, or healthcare contexts into specific color palette, typography, and UI styling rules. This ensures the generated design system fits the product's intended audience.

Why do AI-generated interfaces often look generic, and how can UX writing rules fix this?▼

AI-generated interfaces look generic without strict design contracts. Establishing UX writing rules, domain-specific style decisions, and anti-pattern guardrails transforms vague product ideas into intentional visual directions, ensuring human-quality, implementation-ready interfaces.

Related Skills

Explore More Design & Creative Skills→
onejaejaeonejaejae
2

figma-analyzer

Analyzes screenshots or URLs to extract product requirements and workflows from FlyeX designs.

Community
Advanced
abhishekmmgnabhishekmmgn

impeccable

Coordinate UX/UI design workflows from brief to production-ready polish.

Community
Advanced
ChoreShoreChoreShore

color-contrast

Validate WCAG 2.1 color contrast ratios and suggest compliant alternatives.

Official
Intermediate
guideopsguideops

artistic

Define design tokens, typography scales, and color palettes for high-contrast artistic styles.

Community
Intermediate