メニュー
SkillsMP は Jason904/ui-skill-lab から 14 件の skill を収集しています。skill を開くとソースと詳細を確認できます。
収集済み skill 14 件中 14 件を表示しています。
This skill should be used after visual-spec-review passes and before OpenSpec UI update or frontend implementation. It expands screenshot-derived visual specs into a production design system by adding interaction states, responsive behavior, accessibility…
原文の言語: 英語
This skill should be used when the user asks to convert a PRD, OpenSpec change, or product idea into a structured GPT Image 2 UI prompt pack for generating high-fidelity flat UI reference images. It produces prompt materials, UI type decisions, variants,…
原文の言語: 英語
This skill should be used after Codex implements a UI change and before visual acceptance review. It audits source code against project-specific visual specs, design tokens, component tree, design-system rules, OpenSpec implementation strategy, UI type,…
原文の言語: 英語
Use for UI/UX design intelligence in Codex: planning, building, reviewing, improving, or implementing web/mobile interfaces, landing pages, dashboards, design systems, components, accessibility, color palettes, typography, spacing, motion, charts, responsive…
原文の言語: 英語
This skill should be used after spec-compliance-review and before visual-diff-fix. It captures or analyzes actual browser screenshots and compares them against the reference design, responsive spec, visual tokens, layout spec, component tree, UI type, layout…
原文の言語: 英語
This skill should be used after visual-acceptance-review has generated fix-tasks.json. It applies precise visual fixes from structured diff tasks, preserves source-of-truth contracts, avoids redesign and unrelated refactors, validates each batch, and outputs…
原文の言語: 英語
This skill should be used after visual-to-spec has produced 03_visual_spec/ and before design-system-governor or frontend implementation begins. It independently reviews extracted visual specs against the reference screenshot, UI type, layout paradigm,…
原文の言語: 英語
Use when a user provides a reference UI screenshot and asks to extract visual specs, generate design tokens, create a component tree, or produce a frontend implementation contract, including dashboards, landing pages, mobile screens, image-led UIs, panorama…
原文の言語: 英語
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display,…
原文の言語: 英語
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
原文の言語: 英語
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon…
原文の言語: 英語
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design,…
原文の言語: 英語
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
原文の言語: 英語
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive…
原文の言語: 英語