partme-ai/stitch-ui-design-spec-generator
skills/stitch-skills/stitch-ui-design-spec-generator/SKILL.md
Translate user requirements into a structured Stitch Design Spec JSON covering theme, primaryColor, font, roundness, density, designMode, styleKeywords, and deviceType. Use when starting a new Stitch design task to determine visual direction before prompt assembly. Supports one-shot user requests and PRD documents as input.
$ install --global
skillsauthnpx skillsauth add partme-ai/full-stack-skills stitch-ui-design-spec-generatorInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 10, 2026, 9:09 AM10.7s3 files scanned
SKILL.md
- name:
- stitch-ui-design-spec-generator
- description:
- Translate user requirements into a structured Stitch Design Spec JSON covering theme, primaryColor, font, roundness, density, designMode, styleKeywords, and deviceType. Use when starting a new Stitch design task to determine visual direction before prompt assembly. Supports one-shot user requests and PRD documents as input.
- allowed-tools:
- stitch*:*, Read, Write
Design Spec Generator
Constraint: Only use this skill when the user explicitly mentions "Stitch" or when orchestrating a Stitch design task.
This skill acts as a Creative Director. It takes a high-level user request and outputs a structured Design Specification.
Input
Input may be either:
- User Request (one-shot): e.g., "A cyberpunk login page" or "A clean medical dashboard".
- PRD document or PRD summary: When the user provides a PRD file path or pasted PRD content, first extract function overview and page/screen list (and any visual/theme preferences from non-functional requirements), then apply the Logic Rules below to produce the design spec. For the full PRD-driven workflow (spec-generator → framework spec → prompt-architect → MCP), see docs/prd-to-stitch-workflow.md.
Output Format (JSON)
The skill must produce a JSON block like this:
{
"theme": "DARK" | "LIGHT",
"primaryColor": "Hex Code",
"font": "Font Name",
"roundness": "High" | "Medium" | "Low",
"density": "COMPACT" | "COMFORTABLE" | "SPACIOUS",
"designMode": "WIREFRAME" | "HIGH_FIDELITY",
"styleKeywords": ["Keyword1", "Keyword2"],
"deviceType": "MOBILE" | "TABLET" | "DESKTOP" | "SMART_WATCH"
}
Logic Rules
- Analyze Tone:
- "Corporate/Medical/Finance" -> Clean, Blue/Grey, Low Roundness, Inter font.
- "Creative/Gaming" -> Dark Mode, Neon colors, High Contrast.
- "Lifestyle/Food" -> Warm colors, High Roundness, Serif fonts.
- Determine Device:
- "Dashboard/Admin" -> DESKTOP.
- "App/Instagram-like" -> MOBILE.
- "Watch Face" -> SMART_WATCH.
- Default to MOBILE if unspecified.
- Determine Mode:
- "Sketch/Blueprint/Draft" -> WIREFRAME.
- Default to HIGH_FIDELITY.
Example
User request: "A cyberpunk login page"
Output:
{
"theme": "DARK",
"primaryColor": "#00FFFF",
"font": "Orbitron",
"roundness": "Low",
"density": "COMFORTABLE",
"designMode": "HIGH_FIDELITY",
"styleKeywords": ["Cyberpunk", "Neon", "High Contrast", "Glitch"],
"deviceType": "MOBILE"
}
Usage
Call this skill internally before creating a project or generating a prompt. The output JSON feeds into stitch-ui-prompt-architect (Path B) for final prompt assembly.
Related Skills
partme-ai/uniapp-project
development
VerifiedTrustedCommunity
Provides per-component and per-API examples with cross-platform compatibility details for uni-app, covering built-in components, uni-ui components, and APIs (network, storage, device, UI, navigation, media). Use when the user needs official uni-app components or APIs, wants per-component examples with doc links, or needs platform compatibility checks.
456SKILL.mdUpdated Jun 4, 2026
partme-ai/uniapp-project-creator
tools
VerifiedTrustedCommunity
Creates new uni-app projects via the official CLI or HBuilderX with Vue 2/Vue 3 template selection, manifest.json and pages.json configuration, and directory structure setup. Use when the user wants to scaffold a new uni-app project, initialize project files with a single command, or set up the development environment.
456SKILL.mdUpdated Jun 4, 2026
partme-ai/uniapp-plugin
tools
VerifiedTrustedCommunity
Browses, installs, configures, and manages plugins from the uni-app plugin market (ext.dcloud.net.cn) including component plugins, API plugins, and template plugins with dependency handling. Use when the user needs to find and install uni-app plugins, configure plugin settings, manage plugin dependencies, or integrate third-party components.
456SKILL.mdUpdated Jun 4, 2026
partme-ai/uniapp-native-plugin
tools
VerifiedTrustedCommunity
Develops native Android and iOS plugins for uni-app including module creation, JavaScript-to-native communication, and plugin packaging for distribution. Use when the user needs to build custom native modules, extend uni-app with native capabilities (camera, Bluetooth, sensors), or create publishable native plugins.
456SKILL.mdUpdated Jun 4, 2026