skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

design-brief

Parse I-Lang design briefs into DESIGN.md specs and HTML token previews.

Updated May 20, 2026
Search Tags:#typography#design system#color palette#design tokens#design brief#design spec#i-lang
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill design-brief-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-brief
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/design-brief
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill design-brief-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Vague design requests like "make it professional" leave too much room for interpretation. This Skill converts structured I-Lang briefs or natural language descriptions into a concrete, unambiguous design specification with resolved color tokens, typography, spacing, and constraints. ## Core Features & Use Cases - Brief Parsing: Accepts I-Lang structured briefs or natural language, mapping phrases like "dark mode" or "playful" to a closed vocabulary of 8 design dimensions. - Token Resolution: Resolves symbolic values (e.g., palette=navy_and_white) into concrete hex colors, font stacks, and spacing values, with rule-based defaults for unspecified dimensions. - Dual Output: Generates a 9-section DESIGN.md following the Open Design convention plus a brief-preview.html rendering color swatches, typography specimens, spacing rulers, and live components. - Use Case: A user says "I need a clean dark landing page for a developer tool, Inter font, no animations" and receives a complete DESIGN.md with resolved tokens and a visual HTML preview, plus a report of which dimensions were defaulted. ## Quick Start Create a design brief for a minimal dark-mode SaaS landing page using Inter typography and no animations.

Frequently Asked Questions about design-brief

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

FAQPage Schema
How do I create a design brief from a natural language description?▼

Provide a plain-language description like "clean dark landing page, Inter font, no animations" and the Skill maps each phrase to structured dimensions using its keyword mapping table. Unspecified dimensions are filled with rule-based defaults and reported at the end.

What is the I-Lang design brief format?▼

I-Lang is a structured brief syntax starting with [PLAN:@DESIGN|type=...] followed by pipe-delimited dimension assignments such as palette, accent, typography, layout, mood, density, and exclude. Each dimension accepts values from a closed vocabulary with concrete token mappings.

What happens if a design brief dimension is missing?▼

Missing dimensions are resolved using default rules based on mood compatibility, such as light_clean palette for editorial mood or coral accent for dark palettes. All applied defaults are listed in a transparency report at the end of the output.

What files does the design brief skill generate?▼

It generates DESIGN.md following Open Design's 9-section convention and brief-preview.html, a visual page showing color swatches, typography specimens, a spacing ruler, and live component previews styled with the resolved tokens.

What happens when an unrecognized palette or mood value is provided?▼

The Skill uses a closed vocabulary, so unrecognized values like palette=ocean_blue are rejected. The agent prompts for clarification and suggests the closest valid options instead of guessing.

Related Skills

Explore More Design & Creative Skills→
Spectra29115Spectra29115

branding-generator

Generate brand identity kits with logos, color palettes, typography, and style guides.

Community
Advanced
nexu-ionexu-io
93.2k

saas-landing

Generate single-page SaaS landing HTML files using design system tokens and structured input parameters.

Official
Intermediate
nextlevelbuildernextlevelbuilder
123.5k

brand

Manage brand voice, visual identity, and asset compliance with validation scripts.

Official
Intermediate
MyHeavenDyfMyHeavenDyf

flowai-live-dashboard-template

Assemble team management dashboards with tabs and key metrics using FlowAI design system variables.

Community
Intermediate