build()
Create a complete experience
Turn a product goal into a responsive, runnable interface.
Design guidance for thoughtful interfaces
Make digital products easier to understand.
Soft Syntax helps agents create clear, accessible interfaces with approachable minimalism, gentle playfulness, and soft flat imagery.
Build · Restyle · Review · Plan · Image
A practical design method
Warmth begins with good structure.
Soft Syntax is not a visual template. It asks what the product is for before choosing color, layout, or character, then removes everything that does not help people understand or act.
Clarity first
Lead with one outcome and one obvious next step.
Warmth through guidance
Use language, rhythm, and hierarchy before decoration.
Play with purpose
Spend delight where reassurance or discovery matters.
Visual language
Three layers, composed in order.
Structure makes it clear. Character makes it human. Expression makes it recognizable. Each layer has one job, so warmth never becomes visual noise.
-
Structure
Approachable minimalism
A restrained, practical framework makes hierarchy obvious and every next step easy to find.
-
Character
Gentle playfulness
Careful asymmetry, friendly language, and one moment of delight make the experience feel alive.
-
Expression
Soft flat design
Rounded type, solid shapes, quiet surfaces, and purposeful imagery form a recognizable world.
Five working modes
Use the same grammar at every stage.
Start fresh, improve what exists, find what is getting in the way, establish a direction before code is written, or create original product imagery.
restyle()
Improve without erasing identity
Preserve behavior and brand strengths while making the system clearer.
review()
Find friction before polish
Prioritize usability, accessibility, responsiveness, and visual-system issues.
plan()
Set a direction that can be built
Define structure, tokens, behavior, and a product-specific signature.
image()
Create imagery with a clear job
Design original marks and illustrations around one meaningful concept.
The working sequence
Context before color. Systems before decoration.
Every decision follows from what people need to understand and do.
-
Understand the task
Identify the audience, page goal, primary action, and likely friction.
-
Establish the system
Choose type, role-based color, spacing, and responsive behavior.
-
Compose with restraint
Build clear chapters and add one useful moment of delight.
-
Verify the real experience
Inspect content, keyboard access, states, and actual screen widths.
Soft Solid Semantic Imagery
Give every shape a job.
Logos and illustrations use one dominant silhouette, only the cues needed for recognition, and one semantic focal point. No ornamental depth. No competing metaphors.
one silhouette
+
minimum cues
+
one focal point
Demos
Real sites, before and after.
Full-page captures of real websites restyled with Soft Syntax. Switch between the untouched site and the rebuild — same content, identical viewports.
Start here
Give your agent a gentler design grammar.
Install the skill, then describe your product, audience, page goal, and desired result in natural language.