Soft Syntax is a reusable design skill for clear, accessible, responsive interfaces shaped by approachable minimalism, restrained playfulness, warm typography, and soft flat imagery.
- Designs new interfaces, restyles existing products, reviews designs, and plans implementation.
- Defines visual direction for original logos and illustrations, and generates them when the host environment provides a compatible tool.
- Clarity first: every page has one primary action and a clear information hierarchy.
- Warmth through structure: approachable language, typography, spacing, and guidance do more work than decoration.
- Play with purpose: delight supports curiosity, reassurance, discovery, or progress.
- Flat, not lifeless: solid shapes, tonal surfaces, borders, and negative space create depth without decorative effects.
- Specific, not templated: each result draws its identity from the product, audience, and content.
- Accessible by default: interaction, responsiveness, and state clarity are part of the visual system.
Install with Skills CLI:
npx skills add catwithlover/soft-syntaxOr install manually for your preferred Agent Skills-compatible tool:
git clone https://github.com/catwithlover/soft-syntax.git
cp -r soft-syntax/skills/soft-syntax /path/to/your/agent/skills/Reload or restart your agent tool after installation so it can discover the skill.
With skills/soft-syntax installed, describe the product, audience, page goal, and desired result in natural language:
Design a responsive course discovery page for adults learning programming for
the first time. Make it easy to compare courses, filter them by topic and
difficulty, and understand where to begin. Keep the experience calm and encouraging.
The demos/ directory collects before/after captures of real websites restyled with the skill — currently the Selenium homepage, the ModSecurity homepage, and the national animal shelter listing — with notes on the strategy, palette basis, and decisions behind each result.
If the host harness or model runtime provides an image-generation tool, Soft Syntax can guide it with the included illustration language. Describe what the product does, what the logo should convey, and where it will be used. Do not ask it to imitate an existing logo.
Use Soft Syntax to design and generate a pictorial logo for [project name].
The product helps [audience] achieve [outcome]. The logo should convey
[one core concept]. Choose a subject that makes the concept clear at a glance.
Follow the Soft Solid Semantic Imagery style: use one dominant, softly rounded
silhouette; include only the details needed to identify the subject; and use a
small contextual palette, generous negative space, and one meaningful focal
point. Build the form with solid fills, negative space, and overlapping shapes.
Avoid gradients, shadows, outer strokes, decorative scenery, text, and
competing metaphors.
Honor the requested format first. If an editable SVG is requested, construct
native SVG with source-editing tools. For other formats, use a compatible
image-generation tool when available and create the image on a transparent
square canvas. If neither route can produce the requested deliverable, provide
a production-ready image prompt and an SVG construction plan.
The same approach can guide characters, empty states, hero imagery, and product metaphors.
Soft Syntax combines three layers:
- Approachable minimalism creates clear hierarchy with a restrained, practical structure.
- Gentle playfulness adds just enough curiosity, warmth, and life.
- Soft flat design uses typography, solid shapes, subtle surfaces, and purposeful imagery.
For original artwork, Soft Solid Semantic Imagery uses one dominant silhouette, only the details needed for recognition, a restrained palette, and one meaningful focal point. It can depict creatures, plants, natural forms, celestial bodies, objects, and abstract product metaphors without turning everything into a mascot.
- Browser or screenshot tools for complete visual checks
- An image-generation tool supplied by the host harness or model runtime for direct generation
Soft Syntax source, documentation, and logo are released under the MIT License. The bundled Quicksand and Huninn files retain their upstream licenses; details are included in skills/soft-syntax/assets/fonts.