Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

space-generative-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

112 repo starsObserved in 1 repos
Design

space-logo-generator

批量生成品牌Logo。支持两种入口:(1)用户描述品牌/用途后批量生成10个Logo变体 (2)用户上传参考图片后分析并生成Logo。提供7种主流风格选择。调用Gemini API生成,保存到Obsidian图片目录。触发词:"生成Logo"、"设计Logo"、"做个Logo"、"批量Logo"、"帮我设计一个标志"。

112 repo starsObserved in 1 repos
Design

space-mermaid-diagram

将任意文本、工作流、逻辑转换为清晰简约的 Mermaid 流程图。支持 flowchart、sequence、class 等多种图表类型。使用场景:(1) 需要可视化工作流程,(2) 将文档/对话转为流程图,(3) 创建系统架构图,(4) 生成时序图/类图。自动保存到 Obsidian 画板目录,按日期和主题分类。

112 repo starsObserved in 1 repos
Design

space-storyboard-generator

根据用户描述的故事内容,润色故事线并拆分为分镜脚本,批量生成风格一致的故事板插图。提供8种视觉风格选择,基于故事类型推荐最佳风格。调用Gemini API生成图片,保存到Obsidian图片目录。触发词:"分镜故事"、"故事板"、"做个分镜"、"创建故事板"、"storyboard"、"画个故事"。

112 repo starsObserved in 1 repos
Design

space-text-logic-diagram

将文本内容进行逻辑拆解,生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文,一次可拆解多张图。

112 repo starsObserved in 1 repos
Design

figma-build

Build a Figma design from code or a description — the reverse of figma-codegen. Reuses the connected file's existing design system (components, variables, styles) instead of drawing primitives with hardcoded values. Triggers whenever the user wants something created or updated IN Figma from code or a spec — e.g. 'build this in Figma', 'create a Figma design for this', 'push this component/screen to Figma', 'turn this React/Vue into a Figma design', 'recreate this UI in Figma', 'make a Figma version of …', 'design a landing page/screen in Figma' — or whenever a coding artifact (a component, page, or spec) appears alongside a request to author in a connected Figma file. Works for full screens, sections, single components, or design-system assets.

111 repo starsObserved in 1 repos
Design

penpot-workflow

Manage design work in Penpot — create projects, organize pages, build components, export assets, review designs visually, and handle design-to-code handoff. Use when asked to create designs, manage Penpot projects, build components, export tokens, set up a new design project, review a design, take screenshots, or show what something looks like.

111 repo starsObserved in 1 repos
Design

prd-to-ux

Use when translating a PRD, feature spec, or raw product idea into screen-level prompts for web UX generators (Google Stitch, Figma AI, Pencil.dev, Claude Design, v0, or similar). Use before creating visual mockups or wireframes.

111 repo starsObserved in 1 repos
Design

ui-cloner

Use when user provides a URL and wants to replicate or clone a website's UI, design, or visual style for their own product. Entry point for the full 4-phase SRIP pipeline.

111 repo starsObserved in 1 repos
Design

usability-frameworks

Usability testing methodology, Nielsen's heuristics, and usability metrics. Use when planning usability tests, evaluating UI against heuristics, writing test scripts, or measuring task success rates. Trigger on: 'run a usability test', 'heuristic evaluation', 'usability test script', 'task success rate', 'think-aloud protocol'.

111 repo starsObserved in 1 repos
Design