What triggers this skill?

Trigger keywords like 'layui', 'layui-vue', or explicit Stitch mentions prompt this skill to produce a Layui-Vue design spec.

What is the difference between Prefix and Selector modes?

Prefix mode outputs a ready-to-paste Hard constraints prefix; Selector mode outputs a CONTRACT_SELECTION_JSON_V1 followed by a final Stitch prompt with only the required component/state snippets.

Can I customize colors, typography, or component tokens?

Yes. Colors, spacing, radius, and typography are defined in the prefix; you can adjust them for your project, and selector mode can reference these tokens when selecting components and states.

stitch-ui-design-spec-layui

npx machina-cli add skill partme-ai/stitch-skills/stitch-ui-design-spec-layui --openclaw

Files (1)

SKILL.md

2.8 KB

Layui Design Spec (Layui-Vue / Vue 3.0)

Constraint: Only use this skill when the user explicitly mentions "Stitch".

Purpose

This skill makes the Layui-Vue design spec executable in two modes:

Prefix mode: output a paste-ready Hard constraints prefix for Stitch [Context].
Selector mode: output CONTRACT_SELECTION_JSON_V1 and then an assembled Stitch prompt that injects only the required component/state snippets.

Trigger Keywords

Prefer this skill when the user request includes any of:

layui, layui-vue, layui vue

Chinese trigger keywords (only for triggering):

layui 风格
layui admin

Source of Truth

references/contract.md
references/examples.md
references/official.md

Output (STRICT)

Decide the mode by the user intent:

If the user asks for beautify/polish/refine an existing screen, or asks for selector / JSON / contracts.include / states.include → use Selector mode.
Otherwise → use Prefix mode.

Prefix mode

Return exactly one code block:

[Hard constraints prefix]
- Framework: Layui-Vue (Vue 3).
- Design Tokens:
  - Colors: Primary=#16baaa (Cyan-Green), Secondary=#16b777, Nav-bg=#393D49.
  - Functional: Success=#16b777, Warning=#FFB800, Danger=#FF5722, Info=#31BDEC.
  - Spacing: 10px / 15px grid system.
  - Radius: Small=2px (Classic Layui), Medium=4px. No large radius.
  - Typography: Base size 14px. Titles font-weight 500.
- Component Contracts:
  - Buttons: layui-btn (Height 38px, Radius 2px).
  - Inputs: layui-input (Height 38px, Border #e2e2e2).
  - Cards: layui-card (White bg, Header border-bottom #f6f6f6).
  - Tables: layui-table (Header #f2f2f2, Border #e2e2e2).
  - Others: <lay-page-header>, <lay-result>, <lay-skeleton>, <lay-timeline>, <lay-space>.
- Layout Invariants:
  - Style: Minimalist, Flat, Clean, "Classic Admin Design".
  - Keep logo placement and alignment exactly as-is.

Selector mode

Return exactly two code blocks, in this order, with no extra prose:

Contract selection JSON:

{
  "version": "CONTRACT_SELECTION_JSON_V1",
  "designSystem": "layui-vue",
  "mode": "selector",
  "contracts": { "include": [] },
  "states": { "include": [] }
}

Final Stitch prompt:

[Context]
(Paste Hard Constraints Prefix here)
(Add "Layout Invariants" from contract.md if beautifying)

[Layout]
(Describe the macro layout structure, e.g., "Admin Layout with Sidebar and Header")

[Components]
(Inject component snippets matching the JSON selection above)

References

Source

git clone https://github.com/partme-ai/stitch-skills/blob/main/skills/stitch-ui-design-spec-layui/SKILL.mdView on GitHub

Overview

This skill generates a Layui-Vue design spec for Stitch in two modes: a hard-constraints prefix or a selector JSON with an assembled prompt. It helps enforce UI consistency by defining tokens, component contracts, and layout invariants that Stitch can reliably use.

How This Skill Works

When invoked, the skill detects Stitch-related intent and returns either a Prefix mode output containing a ready-to-paste Hard constraints prefix, or a Selector mode output consisting of CONTRACT_SELECTION_JSON_V1 followed by a final Stitch prompt that injects only the required component/state snippets. Outputs reference contract.md, examples.md, and official.md to ensure alignment with the design system.

When to Use It

When the user explicitly mentions Stitch along with Layui or layui-vue and wants a design spec.
When you need a fresh Prefix mode hard constraints prefix for a new Stitch screen.
When the user asks for selector/JSON output to refine or assemble only the required components and states.
When ensuring consistent tokens (colors, spacing, radius, typography) and a minimalist admin style across Stitch UI.
When sharing a paste-ready design spec with teammates or integrating into a design workflow.

Quick Start

Step 1: Identify the desired mode (Prefix or Selector) based on user intent.
Step 2: Request either the Hard constraints prefix (Prefix mode) or the CONTRACT_SELECTION_JSON_V1 plus final prompt (Selector mode).
Step 3: Copy the code blocks exactly as produced and apply them to the Stitch workflow.

Best Practices

Clarify mode (Prefix vs Selector) before generating output to avoid incorrect blocks.
Use the provided component contracts (Buttons, Inputs, Cards, Tables) to ensure consistent styling.
Include design tokens (colors, spacing, radius, typography) exactly as specified in the prefix when applicable.
Preserve Layout Invariants (minimalist, flat, Classic Admin Design) and logo placement.
Validate the generated blocks for syntax and paste-ability before applying to Stitch.

Example Use Cases

Generate a Prefix mode hard constraints prefix for a new Stitch admin page using Layui-Vue tokens.
Refine an existing Stitch screen by generating a Selector mode contract with specific components included.
Create a dashboard layout spec that enforces the classic admin look and logo alignment.
Produce a design spec for a user profile list using Layui-Vue components and 38px button height.
Share a paste-ready Layui-Vue Stitch spec with teammates for rapid integration.

Frequently Asked Questions

Add this skill to your agents