design

Adityaraj0421 · Development

组建虚拟设计团队,产出生产级质量的 UI、UX、视觉、社交媒体、邮件及数据输出。设计经理根据任务范围调配合适专家(产品设计师、UX 设计师、UI 设计师、UX 研究员、内容设计师、设计系统负责人、动效设计师、创意总监、社交媒体设计师、社交媒体策略师、社交媒体文案、增长/分析专家、邮件设计师、邮件文案、数据可视化设计师、仪表盘架构师、演示文稿设计师、品牌策略师、插画总监、视频/内容制作者、AI 图像总监、AI 视频总监、AI 音频与语音制作者、AI 提示工程师、印刷设计师)。 触发条件:用户要求设计、构建、美化或原型化网页、应用、组件、仪表盘、演示文稿、设计令牌或品牌资产。也适用于 Figma 到代码流程、设计系统创建、响应式布局、深色模式主题、无障碍审计、UX 流程、线框图、内容策略、动画、部署、社交媒体内容、活动、Instagram、TikTok、LinkedIn、Twitter、YouTube、幻灯片、故事、短视频、内容日历、标签、标题、社交数据分析、邮件模板、邮件活动、通讯、邮件序列、欢迎邮件、滴灌活动、邮件文案写作、HTML 邮件、送达率、图表、图形、数据可视化、柱状图、折线图、散点图、关键绩效仪表盘、分析仪表盘、数据表格、演示文稿、融资路演、幻灯片集、Keynote、PowerPoint、Google Slides、投资者路演、品牌定位、品牌策略、品牌形象、品牌审计、品牌架构、品牌语调、插画、图标系统、图标、SVG 资产、插图、风格指南、视频脚本、故事板、视频内容、产品演示视频、解释视频、短形式视频、短视频脚本、YouTube 脚本、TikTok 脚本、动效设计、微交互、页面过渡、动画、CSS 动画、Lottie、生成图像、AI 图像、Midjourney、DALL·E、DALL·e、Ideogram、Firefly、Stable Diffusion、生成视频、AI 视频、Runway、Kling、Sora、Pika、Luma Dream Machine、配音、语音生成、AI 音频、ElevenLabs、Suno、Murf、AI 提示、提示优化、情绪板、生成情绪板、提示优化、AI 生成图像、AI 生成视频、图像生成、视频生成、印刷布局、名片、PDF 报告、印刷设计、印刷审计、预检检查、出血、证书设计、宣传册布局、印刷制品、年度报告印刷、发票设计、印刷传单、聊天机器人、对话式 UI、语音界面、聊天组件、虚拟助手、对话流、visionOS、Vision Pro、空间 UI、深度层级、WebXR、混合现实、增强现实、沉浸式、AR 设计、AR 叠加、世界追踪、空间计算、GDPR、CCPA、合规设计、Cookie 同意、同意横幅、HIPAA、PCI DSS、数据删除、数据可携性、无障碍合规、ADA 合规、naksha-init、naksha-status、项目记忆、流水线、运行流水线、竞争对手分析、对比设计、竞争审计、设计对比、提取令牌、令牌提取、查找我的设计令牌、映射令牌、令牌审计、令牌覆盖率、UX 评审、三轮评审、多轮审计、全面设计审查、设计第二意见。 <example> 用户:"为我们的 SaaS 产品建一个落地页" → 助手:激活 UI 设计师、内容设计师、动效设计师、设计系统负责人</example> <example> 用户:"将这个 Figma 设计转为代码" → 助手:路由至 /figma 命令并引用 Figma 工作流</example> <example> 用户:"为任务管理器创建 Figma 线框图" → 助手:路由至 /figma-create,由 UX 设计师 + Figma 创建者执行</example> <example> 用户:"为我们的产品发布创建 Instagram 贴文" → 助手:激活社交媒体设计师、社交媒体文案、UI 设计师</example> <example> 用户:"为第二季度规划社交媒体活动" → 助手:路由至 /social-campaign,由社交媒体策略师 + 文案 + 分析专家执行</example> <example> 用户:"为新注册用户创建欢迎邮件系列" → 助手:路由至 /email-campaign,由邮件设计师 + 邮件文案执行</example> <example> 用户:"为产品发布创建一个 HTML 邮件模板" → 助手:路由至 /email-template,由邮件设计师 + 邮件文案执行</example> <example> 用户:"创建一张展示月度收入趋势的图表" → 助手:路由至 /chart-design,由数据可视化设计师执行</example> <example> 用户:"为 SaaS 产品设计一个分析仪表盘" → 助手:路由至 /dashboard-layout,由仪表盘架构师 + 数据可视化设计师 + UI 设计师执行</example> <example> 用户:"这个插件怎么用?" 或 "你能做什么?" 或 "教程" 或 "入门" → 助手:路由至 /design-tutorial — 交互式引导之旅,可选择路径</example> <example> 用户:"在 Figma 中为我们的设计系统创建完整的组件库" → 助手:路由至 /figma-component-library,由 Figma 创建者 + 设计系统负责人 + UI 设计师执行</example> <example> 用户:"为我们的种子轮融资设计一份路演幻灯片" → 助手:激活演示文稿设计师,路由至 /presentation-design,采用投资者路演结构</example> <example> 用户:"定义我们的品牌定位与视觉形象" → 助手:激活品牌策略师,路由至 /brand-strategy,采用定位框架</example> <example> 用户:"为我们的产品创建图标系统" → 助手:激活插画总监,路由至 /illustration-system,设置图标网格与风格规则</example> <example> 用户:"写一个60秒的产品演示视频脚本" → 助手:激活视频/内容制作者,路由至 /video-script,采用钩子-问题-解决方案-行动号召结构</example> <example> 用户:"为我们的应用添加微交互和页面过渡" → 助手:激活动效设计师,路由至 /motion-design,采用持续时间/缓动系统</example> <example> 用户:"为我们的产品发布活动生成一张符合品牌调性的图像" → 助手:路由至 /gen-image,由 AI 图像总监 + AI 提示工程师执行</example> <example> 用户:"为我们的新活动方向创建一张情绪板" → 助手:路由至 /gen-moodboard,由 AI 图像总监 + 品牌策略师执行</example> <example> 用户:"为 Instagram Reels 生成一段15秒的产品视频" → 助手:路由至 /gen-video,由 AI 视频总监 + AI 提示工程师执行</example> <example> 用户:"为我们的产品演示视频写一段旁白" → 助手:路由至 /gen-audio,由 AI 音频与语音制作者执行</example> <example> 用户:"这个 Midjourney 提示词不起作用,能帮我优化吗?" → 助手:路由至 /prompt-refine,由 AI 提示工程师执行</example> <example> 用户:"为我们的产品设计一张名片" → 助手:路由至 /print-layout,由印刷设计师执行 — 设置出血区、安全区、CMYK 颜色</example> <example> 用户:"为我们的 SaaS 产品生成一份12页的年度报告 PDF" → 助手:路由至 /pdf-report,由印刷设计师执行 — 页面几何、主模板、字体系统</example> <example> 用户:"检查我的 Figma 文件是否存在设计问题" → 助手:路由至 /lint-design — 设计检测代理扫描孤立颜色、间距违规、缺失自动布局、断开样式</example> <example> 用户:"在我展示前帮我评审这些界面" → 助手:路由至 /design-critique — 设计评审代理运行尼尔森十大启发式法则 + 对当前 Figma 文件的视觉审计</example> <example> 用户:"给我一个设计评分" → 助手:路由至 /design-score — 0–100 的量化质量评分,涵盖无障碍性、可用性、视觉质量与令牌合规性</example> <example> 用户:"给这页设计打个分" → 助手:路由至 /design-score — 0–100 的量化质量评分,涵盖无障碍性、可用性、视觉质量与令牌合规性</example> <example> 用户:"评价一下这个设计" → 助手:路由至 /design-score — 0–100 的量化质量评分,涵盖无障碍性、可用性、视觉质量与令牌合规性</example> <example> 用户:"这个设计怎么样?" → 助手:路由至 /design-score — 0–100 的量化质量评分,涵盖无障碍性、可用性、视觉质量与令牌合规性</example> <example> 用户:"给我个分数" → 助手:路由至 /design-score — 0–100 的量化质量评分,涵盖无障碍性、可用性、视觉质量与令牌合规性</example> <example> 用户:"设计质量得分是多少?" → 助手:路由至 /design-score — 0–100 的量化质量评分,涵盖无障碍性、可用性、视觉质量与令牌合规性</example> <example> 用户:"量化一下这个设计" → 助手:路由至 /design-score — 0–100 的量化质量评分,涵盖无障碍性、可用性、视觉质量与令牌合规性</example> <example> 用户:"在我们上线前对这页做一次 QA" → 助手:路由至 /design-qa <file> — 设计质检代理检查响应式断点、令牌合规性、交互状态、动效质量</example> <example> 用户:"这个表单是否无障碍?" → 助手:路由至 /accessibility-audit <file> — 无障碍审计代理执行完整的 WCAG AA 审计(对比度、键盘导航、语义化 HTML、ARIA)</example> <example> 用户:"为我的项目设置品牌色和框架" → 助手:路由至 /naksha-init — 交互式向导生成 .naksha/project.json,包含品牌、框架与令牌格式</example> <example> 用户:"当前项目上下文是什么?" → 助手:路由至 /naksha-status — 显示 .naksha/ 项目记忆、品牌令牌与近期决策</example> <example> 用户:"运行上线准备流水线" → 助手:路由至 /pipeline run launch-prep — 顺序执行设计 → 无障碍审计 → 设计评审 → 设计交接</example> <example> 用户:"对比我们的落地页和 Stripe 的" → 助手:路由至 /design-compare — 通过 Playwright 抓取两个网址,进行并列布局与用户体验分析</example> <example> 用户:"分析 Figma 官网的设计模式,我可以借鉴哪些" → 助手:路由至 /competitive-audit — 抓取网站,提取配色方案、字体系统、用户体验模式并提供评分建议</example> <example> 用户:"设计一个客户支持聊天机器人界面" → 助手:路由至 /design-chatbot — 对话式设计师生成对话流程、气泡界面规范、快捷回复、错误状态</example> <example> 用户:"为我们的智能家居应用设计语音界面" → 助手:路由至 /design-voice-ui — 对话式设计师生成唤醒词流程、确认模式、音频反馈规范</example> <example> 用户:"为 visionOS 设计一个生产力应用" → 助手:路由至 /design-spatial — 空间设计师生成窗口类型选择、深度层级、装饰规范、空间字体</example> <example> 用户:"为组装说明设计一个 AR 叠加层" → 助手:路由至 /design-ar-overlay — 空间设计师生成锚点策略、追踪状态、说明卡片、遮挡处理</example> <example> 用户:"为欧盟用户设计 Cookie 同意流程" → 助手:路由至 /design-gdpr — 合规设计师生成 IAB TCF Cookie 横幅、隐私控制中心、数据删除流程</example> <example> 用户:"审计我们的支付表单是否符合 PCI 合规" → 助手:路由至 /design-compliance --regulation pci — 合规设计师审计卡号字段隔离、CVV 处理、错误消息标准</example>

Assembles a virtual design team to produce production-quality UI, UX, visual, social media, email, and data output. A Design Manager staffs the right specialists (Product Designer, UX Designer, UI Designer, UX Researcher, Content Designer, Design System Lead, Motion Designer, Creative Director, Social Media Designer, Social Media Strategist, Social Media Copywriter, Growth/Analytics Specialist, Email Designer, Email Copywriter, Data Viz Designer, Dashboard Architect, Presentation Designer, Brand Strategist, Illustration Director, Video/Content Producer, AI Image Director, AI Video Director, AI Audio & Voice Producer, AI Prompt Engineer, Print Designer) based on the task scope. Trigger when the user asks to design, build, style, or prototype web pages, apps, components, dashboards, presentations, design tokens, or brand assets. Also trigger for Figma-to-code workflows, design system creation, responsive layouts, dark mode theming, accessibility audits, UX flows, wireframes, content strategy, animations, deployment, social media content, campaigns, Instagram, TikTok, LinkedIn, Twitter, YouTube, carousels, stories, reels, content calendars, hashtags, captions, social analytics, email templates, email campaigns, newsletters, email sequences, welcome emails, drip campaigns, email copywriting, HTML email, deliverability, charts, graphs, data visualization, bar charts, line charts, scatter plots, KPI dashboards, analytics dashboards, data tables, presentations, pitch decks, slide decks, keynote, powerpoint, google slides, investor deck, brand positioning, brand strategy, brand identity, brand audit, brand architecture, brand voice, illustrations, icon systems, icons, SVG assets, spot illustrations, style guide, video scripts, storyboards, video content, product demo video, explainer video, short-form video, reels script, youtube script, tiktok script, motion design, micro-interactions, page transitions, animation, CSS animations, Lottie, generate image, ai image, midjourney, dall-e, dall·e, ideogram, firefly, stable diffusion, gen video, ai video, runway, kling, sora, pika, luma dream machine, voiceover, voice gen, ai audio, elevenlabs, suno, murf, ai prompt, prompt refine, moodboard, gen-moodboard, prompt-refine, ai-generated image, ai-generated video, image generation, video generation, print layout, business card, pdf report, print design, print audit, preflight check, bleed, certificate design, brochure layout, print artifact, annual report print, invoice design, print flyer, chatbot, conversational UI, voice interface, chat widget, virtual assistant, dialog flow, visionOS, Vision Pro, spatial UI, depth hierarchy, WebXR, mixed reality, augmented reality, immersive, AR design, AR overlay, world tracking, spatial computing, GDPR, CCPA, compliance design, cookie consent, consent banner, HIPAA, PCI DSS, data deletion, data portability, accessibility compliance, ADA compliance, naksha-init, naksha-status, project memory, pipeline, run pipeline, competitor analysis, compare designs, competitive audit, design compare, extract tokens, token extraction, find my design tokens, map tokens, token audit, token coverage, UX critique, 3-pass review, multi-pass audit, thorough design review, design second opinion. Covers both quick visual tweaks and full product design — the Manager scales the team to match task complexity. <example> user: "Build me a landing page for a SaaS product" assistant: Activates UI Designer, Content Designer, Motion Designer, Design System Lead </example> <example> user: "Convert this Figma design to code" assistant: Routes to /figma command with Figma Workflow reference </example> <example> user: "Create wireframes in Figma for a task manager" assistant: Routes to /figma-create with UX Designer + Figma Creator </example> <example> user: "Create Instagram posts for our product launch" assistant: Activates Social Media Designer, Social Media Copywriter, UI Designer </example> <example> user: "Plan a social media campaign for Q2" assistant: Routes to /social-campaign with Social Media Strategist + Copywriter + Analytics </example> <example> user: "Create a welcome email sequence for new signups" assistant: Routes to /email-campaign with Email Designer + Email Copywriter </example> <example> user: "Build an HTML email template for our product launch" assistant: Routes to /email-template with Email Designer + Email Copywriter </example> <example> user: "Build a chart showing monthly revenue trends" assistant: Routes to /chart-design with Data Viz Designer </example> <example> user: "Design an analytics dashboard for a SaaS product" assistant: Routes to /dashboard-layout with Dashboard Architect + Data Viz Designer + UI Designer </example> <example> user: "How do I use this plugin?" or "What can you do?" or "Tutorial" or "Getting started" assistant: Routes to /design-tutorial — interactive guided tour with track selection </example> <example> user: "Build a complete component library in Figma for our design system" assistant: Routes to /figma-component-library with Figma Creator + Design System Lead + UI Designer </example> <example> user: "Design a pitch deck for our seed round" assistant: Activates Presentation Designer, routes to /presentation-design with investor deck structure </example> <example> user: "Define our brand positioning and visual identity" assistant: Activates Brand Strategist, routes to /brand-strategy with positioning framework </example> <example> user: "Create an icon system for our product" assistant: Activates Illustration Director, routes to /illustration-system with icon grid and style rules </example> <example> user: "Write a 60-second product demo video script" assistant: Activates Video/Content Producer, routes to /video-script with hook-problem-solution-CTA structure </example> <example> user: "Add micro-interactions and page transitions to our app" assistant: Activates Motion Designer, routes to /motion-design with duration/easing system </example> <example> user: "Generate an on-brand image for our product launch campaign" assistant: Routes to /gen-image with AI Image Director + AI Prompt Engineer </example> <example> user: "Create a moodboard for our new campaign direction" assistant: Routes to /gen-moodboard with AI Image Director + Brand Strategist </example> <example> user: "Generate a 15-second product video for Instagram Reels" assistant: Routes to /gen-video with AI Video Director + AI Prompt Engineer </example> <example> user: "Write a voiceover for our product demo video" assistant: Routes to /gen-audio with AI Audio & Voice Producer </example> <example> user: "This Midjourney prompt isn't working, can you fix it?" assistant: Routes to /prompt-refine with AI Prompt Engineer </example> <example> user: "Design a business card for our product" assistant: Routes to /print-layout with Print Designer — sets up bleed, safe zone, CMYK colors </example> <example> user: "Generate a 12-page annual report PDF for our SaaS product" assistant: Routes to /pdf-report with Print Designer — page geometry, master template, typography system </example> <example> user: "Lint my Figma file for design issues" assistant: Routes to /lint-design — design-lint agent scans for orphan colors, spacing violations, missing auto-layout, detached styles </example> <example> user: "Critique these screens before I present them" assistant: Routes to /design-critique — design-critique agent runs Nielsen's 10 heuristics + visual audit against the current Figma file </example> <example> user: "Score my design" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "Give me a design score for this page" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "Rate this design" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "How good is this design?" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "Give me a score" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "What's the design quality score?" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "Quantify this design" assistant: Routes to /design-score — quantitative 0–100 quality score across Accessibility, Usability, Visual Quality, and Token Compliance </example> <example> user: "Run QA on this page before we ship" assistant: Routes to /design-qa <file> — design-qa agent checks responsive breakpoints, token compliance, interactive states, motion quality </example> <example> user: "Is this form accessible?" assistant: Routes to /accessibility-audit <file> — accessibility-auditor agent runs a full WCAG AA audit (contrast, keyboard nav, semantic HTML, ARIA) </example> <example> user: "Set up my project with brand colors and framework" assistant: Routes to /naksha-init — interactive wizard writes .naksha/project.json with brand, framework, and token format </example> <example> user: "What's the current project context?" assistant: Routes to /naksha-status — displays .naksha/ project memory, brand tokens, and recent decisions </example> <example> user: "Run the launch-prep pipeline" assistant: Routes to /pipeline run launch-prep — executes design → accessibility-audit → design-review → design-handoff in sequence </example> <example> user: "Compare our landing page to Stripe's" assistant: Routes to /design-compare — captures both URLs via Playwright, side-by-side layout and UX analysis </example> <example> user: "Analyze Figma's website for design patterns I can steal" assistant: Routes to /competitive-audit — captures site, extracts color palette, type system, UX patterns with rated recommendations </example> <example> user: "Design a customer support chatbot UI" assistant: Routes to /design-chatbot — Conversational Designer generates dialog flow, bubble UI spec, quick replies, error states </example> <example> user: "Design a voice interface for our smart home app" assistant: Routes to /design-voice-ui — Conversational Designer generates wake word flow, confirmation patterns, audio feedback spec </example> <example> user: "Design a visionOS productivity app" assistant: Routes to /design-spatial — Spatial Designer generates window type selection, depth hierarchy, ornament spec, spatial typography </example> <example> user: "Design an AR overlay for assembly instructions" assistant: Routes to /design-ar-overlay — Spatial Designer generates anchor strategy, tracking states, instruction cards, occlusion handling </example> <example> user: "Design our cookie consent flow for EU users" assistant: Routes to /design-gdpr — Compliance Designer generates IAB TCF cookie banners, privacy control center, data deletion flow </example> <example> user: "Audit our payment form for PCI compliance" assistant: Routes to /design-compliance --regulation pci — Compliance Designer audits card field isolation, CVV handling, error message standards </example>

npx skills add https://github.com/Adityaraj0421/naksha-studio --skill design

星标 289 · 安装量 1

GitHub · SkillBox 全部技能