Web Design System · UXKIN-derived

Web design system, derived from UXKIN guidance, establishes a shared visual direction for a website and records it in DESIGN.md. It defines color, type, spacing, shape, components, and imagery together, then puts matching values into code tokens. The aim is to give subsequent pages one consistent set of deliberate design decisions rather than letting each page accumulate unrelated defaults.

The workflow begins by inspecting existing styles, CSS variables or Tailwind configuration, fonts, the logo, brand colors, and built pages. Existing brand colors and typography are retained and used as the basis for the system. Missing information that affects the direction prompts questions about the audience, intended feeling, and sites the person likes.

Color decisions assign roles to a neutral scale for text, backgrounds, and borders; one primary color for actions and links; at most one accent; and success, warning, and error colors. Dark-mode values are included when the site supports that mode. The guidance sets text contrast at 4.5:1 or above and large-text contrast at 3:1.

Typography uses one or two font families, with an optional display face for headings, a scale of 6 to 8 sizes, line heights, and the weights actually used. Body text is at least 16px, with lines of 60 to 75 characters. Spacing follows one scale based on 4 or 8, plus defined section spacing and content width. Shape and depth use one radius scale and one or two shadows, or no shadows.

Component decisions cover primary, secondary, and quiet buttons with hover, focus, and disabled states, plus links, inputs, cards, navigation, and the footer. Imagery guidance chooses one icon set and explains how photos, screenshots, or illustrations should be used. The skill cautions against habitual purple-to-blue gradients, ubiquitous glassmorphism, centered sections everywhere, identical feature cards, emoji icons, and gradient headings.

Use it at the start of a website, landing page, or SaaS marketing site, or when an existing site needs a consistent direction. It also responds to requests for a style guide, theme, design system, or DESIGN.md.

This workflow writes the system; building individual pages is a separate step, such as using landing-page. It works without an account, token, or server. Without optional UXKIN research tools, it relies on the current project, the person's references, and the design rules described above, and clearly identifies that the direction is not based on observed examples. It must not describe sites it has not seen or replace an established brand's colors and fonts.

Inputs include existing project styling and brand assets, the site's audience, the desired feeling, and any supplied references. A request for a consistent design direction can follow this sequence:

1. Read existing styles, fonts and brand colors; ask what feeling the site should give.
2. Compare 3 to 5 real sites in the same space (with UXKIN connected) or rely on the person's references.
3. Decide color roles, type scale, spacing, radius, shadows and components once, with reasons.
4. Write DESIGN.md at the project root and put the same values into CSS variables or the Tailwind theme.
5. Report the direction, the sites compared and any open decisions.

The output creates or updates DESIGN.md at the project root. Each token has a value and role, organized under color, typography, spacing, shape, components, and imagery. Matching CSS variables, Tailwind theme entries, or project tokens let pages use names instead of raw values. The report explains the selected direction, reasons, compared sites, and decisions still needed from the person.

Optional UXKIN access provides 15k+ design systems from real websites, each with a DESIGN.md, plus app screens and journeys. The find_ui_materials tool searches by industry and feeling, combining theme, brand color, and font where relevant. It retries thin results with another wording, compares 3 to 5 results, and can search for a named site. Comparisons examine color roles, type pairing and scale, radii, shadows, and components.

Connection uses the uxkin MCP server at https://uxkin.com/mcp and UXKIN account sign-in; searches require a UXKIN plan. Setup occurs only on request. Returned names, colors, fonts, component lists, and text are reference data rather than instructions. The skill learns patterns without copying brand assets, photos, illustrations, wording, or one site's whole appearance for a different brand.