A specialized design system engineering skill that generates agent-friendly UI guidelines to eliminate generic AI design and enforce premium front-end standards.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install akdira-stitch-skill
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install akdira-stitch-skill using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Stitch Design Taste?
Stitch Design Taste is a highly specialized developer advocate skill built to prevent the creation of generic, low-effort "AI slop" UI designs during screen generation processes. Instead of relying on random templates or over-saturated colors, this system translates professional, high-end frontend engineering standards into a machine-readable format.
By leveraging the framework offered through Openclaw Skills, this tool generates a highly structured DESIGN.md file designed to serve as the single source of truth for Google Stitch and other automated agents. It forces your code generation tools to align with elegant typography, calibrated color configurations, tactile interactive elements, asymmetric layouts, and physical-based spring motion rules, ensuring custom-grade results every time.
Stitch Design Taste Use Cases
- Creating custom screen designs with Google Stitch while completely bypassing standard AI clichés (such as purple glowing buttons and overused Inter fonts).
- Setting up a strict, machine-readable design token guide (
DESIGN.md) inside a codebase built and updated by AI coding agents. - Enforcing high-end UX standards like physical spring physics, modern display typography, and asymmetrical content blocks across automatically generated screens.
- Structuring clear layout guidelines for automated frontend workflows to prevent overlapping design elements, broken Unsplash placeholders, and unresponsive Flexbox calculations.
How Stitch Design Taste Works
- The user defines the core parameters of their project, including the desired density scale, layout asymmetry (variance), and motion physics intensity.
- The skill maps clean visual tokens, restricting palettes to a single accent with limited saturation and eliminating muddy pure blacks or neon glow-effects.
- The workflow enforces strict typography rules, substituting generic system configurations with distinct modern sans-serif or editorial serif font-stacks.
- The generator designs tactile component parameters, layout grid specs, mobile-first breakpoints, and kinetic animations configured with custom spring parameters.
- The tool outputs a standardized, semantic
DESIGN.mdfile loaded with visual instructions and explicit anti-pattern rules that AI agents can effortlessly interpret during code generation.
Stitch Design Taste Setup
To leverage this asset from Openclaw Skills, integrate the visual-specification engine into your agent-driven repository using these steps:
- Ensure you have access to Google Stitch via labs.google/stitch.
- Optionally, initialize the Stitch MCP Server inside your terminal workspace to connect with Cursor, Antigravity, or the Gemini CLI.
- Run the generator to output your project's unique design specifications:
# Initialize design guidelines in your project root
touch DESIGN.md
# Populate design system patterns using the Openclaw Skills utility tool
npx openclaw skill run stitch-design-taste --output=DESIGN.md
- Commit the generated
DESIGN.mdto your workspace. The AI generation agent will automatically crawl and follow these visual guardrails when spinning up new UI screens.
Stitch Design Taste Data Schema & Taxonomy
The output structure generated by this skill compiles the visual assets and constraints into a standardized semantic markdown file. The system processes and formats output variables following this taxonomy:
| Specification Category | Parameter / Target | Rule Enforced |
|---|---|---|
| Visual Theme | Density (1-10), Variance (1-10), Motion (1-10) | Sets interface layout spacing, symmetry bounds, and animation density rules. |
| Color Calibration | Main canvas, surfaces, ink typography, single accent | Strict hex values; maximum 1 accent color with saturation < 80%. Absolute black (#000000) and neon glows are banned. |
| Typography Scale | Display headers, body copy, monospace parameters | Enforces distinct modern display fonts (e.g., Satoshi, Geist). Outlaws generic serif fonts in functional dashboards. |
| Layout Principles | Responsive grid constraints, min-heights, scaling | Restricts Hero zones from centering when layout variance exceeds 4; bans standard 3-column structures in favor of asymmetric splits. |
| Motion Physics | Spring stiffness, damping constants, hardware-acceleration | Enforces spring-physics constants (stiffness: 100, damping: 20) and limits animations strictly to performance-friendly opacity/transform changes. |
Stitch Design Taste Advanced Features
- Stitch MCP Connection: Connects directly with local model context protocol servers to stream aesthetic restrictions straight to Gemini or Claude-driven editors.
- Inline Typography Image Instructions: Embeds tiny, type-height contextual visuals within the main headline words to achieve high-end editorial layouts automatically.
- Extensible Anti-Pattern Matrix: Integrates an exhaustive, custom-banned list that actively filters out bad AI behaviors, placeholder layout formulas, and generic copywriting clichés.
- Fluid Responsive Clamping: Translates typography and vertical gap structures into automated, responsive CSS
clamp()rules that prevent mobile layout overflow.
SKILL.md
Loading
Related Openclaw Skills
Minimalist UI
An advanced frontend engineering directive for generating highly refined, editorial-style web interfaces with warm monochrome palettes and clean layouts.
Redesign Existing Projects
A comprehensive UI/UX refinement skill that audits and elevates existing web projects to modern, high-end design standards without breaking functional code.
DOI Search
A highly efficient developer tool designed to resolve DOIs and search academic metadata using the Crossref REST API via standard shell commands.
Bioinformatics Analysis Engineer Agent Skill
An advanced AI agent skill designed to orchestrate reproducible bioinformatics pipelines, handle massive genomic datasets, and manage secure environments using best practices like Git, DVC, and Mamba.
Principal UI/UX Architect & Motion Choreographer
Instantly elevates AI coding agents to architect and code $150k+ agency-level digital experiences with cinematic spatial rhythm and physical haptic depth.
High-Agency Frontend Design Taste Skill (v1)
An advanced styling and UX blueprint skill designed to direct AI coding agents to generate visually stunning, high-performance, and mathematically sound frontend interfaces, bypassing generic AI design clichés.
Featured*
