All categories
Design & UX
UI, UX, design systems, accessibility, visual design, and frontend polish
- 9,093
- 379
Security grades appear on each card once the skill has been scanned. Newly imported skills may briefly show without a grade until the backfill job runs.
Open in full browserBrowse design & ux skills
Showing 193–216 of 9,093 skills
- Build ScreenBuilds a front-end screen as real, production-quality code from a Figma export, for any stack (React/Tailwind, CSS Modules, React Native, SwiftUI, Jetpack Compose, Flutter, or a custom target). Use this whenever the user wants a design turned into code — "implement the login screen", "build this frame", "code up the settings page", "make this design real", "match the Figma" — or points at a design/ export or a Figma frame, even if they don't say which stack. Resolves the stack, audits the des...Votes: 0GitHub stars: 2
- Audit DesignReviews a Figma export the way a senior frontend / iOS / Android engineer does before any code is written — token and typography binding, spacing grid, sizing and responsiveness, component variants and interaction states (hover/pressed/focus/disabled/error), loading/empty/error screens, content edge cases, touch targets, contrast, font scaling, dark mode, RTL, platform chrome and safe areas, assets and effects that won't translate — and turns every gap into a concrete question for the designe...Votes: 0GitHub stars: 2
- Launch StoryTool manual under launch-film (the brief, the story spine, the script, the beat sheet and reference studies). Turn a launch brief into a launch film's story in your own brand, with the one message, the narrative spine, the voice-over script at the right length, a beat sheet on the music's bar grid and a STORYBOARD.md where every shot names its continuity in and out, its signature move and its sound. Includes the reference study and the logo-swap differentiation test. Use first, before voice, ...Votes: 0GitHub stars: 11
- Hyperframes CreativeNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.Votes: 0GitHub stars: 68,115
- Wireframe Portal TitleA wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.Votes: 0GitHub stars: 68,115
- Snap SwiftuiLaunches an autonomous, pixel-perfect SwiftUI implementation loop using Figma MCP and the iOS Simulator.Votes: 0GitHub stars: 2
- Visual Review OrchestrationUse for visual review routing.Votes: 0GitHub stars: 2
- Infocard Mobile Verifier信息卡移动端唯一正式验收与修复入口。凡涉及手机可读性、390px/窄屏布局、横向溢出、裁切、重叠、表格/代码块响应式、移动截图或移动回归，必须使用本 skill。Votes: 0GitHub stars: 2
- Infocard Update Vs New PatternUse when deciding whether an infocard needs an update or a new card before .docs authoring.Votes: 0GitHub stars: 2
- Infocard Wood Style木感编辑风的信息卡主题。用于把 Simon Willison 式 agentic engineering、技术手册、方法论拆解与高密度指南切换为暖米纸底、深黑标题、蓝色链接、棕色金句块、黑色流程条与三栏结构的编辑型卡片。Votes: 0GitHub stars: 2
- Infocard White Purple Style白紫轻科技工作台风信息卡主题。适合 AI 驱动开发、流程方法论、阶段拆解、产品/工程工作流与多栏结构化内容；主视觉是白底、紫色强调、轻玻璃科技感与三栏流程布局。Votes: 0GitHub stars: 2
- Infocard Style Man Skill信息卡主题体系管理员。用于创建、审查、维护、合并和废弃 infocard style skill、主题预览页及注册关系；统一 Style Skill Schema，检查职责边界、命名和 skill/theme 一致性。涉及具体主题视觉细节时，必须转到对应的 infocard-xxx-style。Votes: 0GitHub stars: 2
- Infocard Scrapbook Style手账拼贴风信息卡主题。用于把资料封面、教程手册、课程介绍、工具指南做成 scrapbook / bullet journal 风格：暖米白纸感背景、横线或网格纹理、左侧便签式卖点、右侧资料预览、手绘箭头与贴纸装饰、黑色刷笔标题和红绿黄高亮。 触发条件：用户提到手账拼贴、bullet journal、scrapbook、sticky note、washi tape、spiral notebook、贴纸海报、资料封面、手册、教程、指南。Votes: 0GitHub stars: 2
- Infocard Redswiss Style红黑瑞士风信息卡 — 用于开源工具图鉴、重型 CLI 生态对比、AI 工具集合类内容。红色斜切 Hero + 纯红黑无蓝配色 + category-dot 色点。模板位于 `theme/redswiss.html`。Votes: 0GitHub stars: 2
- Infocard Q StyleQ 版主题的信息卡技能。用于把 infocard 切换为纸感、手作感、彩色卡片对比风格：暖米纸背景、厚黑边框、圆角卡片、彩色 accent、emoji/pill 标签、高密度网格，适合框架对比、方法论总览、"25+种"型知识卡与轻编辑风。 触发条件：用户提到"Q风"、"手作"、"贴纸"、"框架对比"、"方法论总览"、"25+种"、"方法全景图"。 重要教训（2026-06-05）：生成时必须先读 `any2card/references/q-style-html-generation-guide.md`，不要假设本技能目录里自带同名副本；不得使用简化卡片结构。每个方法卡必须有"理论介绍"+"常见用途"两层，不能只有标题。GitHub 仓库主页型 Q-style 卡的会话笔记见 `references/github-repo-q-style-card-note.md`。Votes: 0GitHub stars: 2
- Infocard Pixelstack Style像素堆叠主题信息卡 — 复古手作 + 思考感像素插画风。骨架三件套（金字塔堆叠方块 + 像素思考者小人 + 消散箭头与金句）必须保留为视觉锚点，承载方法论层级、AI 工作流梯度、工程演进与反直觉金句驱动类内容。模板位于 `theme/pixelstack.html`。Votes: 0GitHub stars: 2
- Infocard Paper Warm Style为知识卡片提供暖纸感、手帐感的视觉设计规范与可复用 CSS/HTML 组件。仅负责视觉风格与静态设计自检。Votes: 0GitHub stars: 2
- Infocard Main Style主要主题的信息卡技能。用于把开源项目、Agent 实施手册、工具说明类 infocard 切换为红黑白主骨架、蓝黄绿辅助信号、紧凑小字高密度模块化排版的默认主主题，统一 stats、grid、pill、flow、section 与移动端表现。Votes: 0GitHub stars: 2
- Infocard Ivy Architecture StyleIvy 架构图谱。分层式系统架构信息卡主题：左侧层级标签 + 右侧模块面板，蓝/紫/绿/红/橙五色语义，实线调用与虚线触发，适合 Agent 编排、基础设施拓扑和可观测性内容；不适合散文、人物或轻量清单。Votes: 0GitHub stars: 2
- Infocard Handline Style手绘便签 / 白板草图风信息卡主题。适合把复杂工作流、并行调度、方法论与策略拆成像手绘草图一样直观的知识图。可允许使用第三方手绘风前端框架（如 rough.js / hand-drawn SVG 工具链）来增强线条抖动与草稿感，但主题约束必须由本 skill 统一定义。Votes: 0GitHub stars: 2
- Infocard Graph Paper Style纸感图谱手册风信息卡技能。适合把代码图谱、知识网络、依赖关系和结构拆解做成米白底、黑灰细线、等宽字体与节点连线构成的研究手册风 infocard。Votes: 0GitHub stars: 2
- Infocard Editorial System Style编辑系统杂志风信息卡主题。用于把研究摘要、产品说明、方法论与项目复盘组织成高对比、强层级、可扫描的 editorial system 页面。Votes: 0GitHub stars: 2
- Infocard Darkgreen Style深绿色监控工作台信息卡风格。适用于终端状态总览、绿色安全感、本地运行、健康度监测、系统仪表盘与轻量效率类主题；主视觉是深绿/墨绿/薄荷绿渐变、终端感面板、状态条与监控仪表。Votes: 0GitHub stars: 2
- Infocard Codex Notebook StyleCodex 笔记本 / 手账拼贴风信息卡主题。适合教程、方法论、入门到进阶的技术叙事内容，用便签、贴纸、活页分隔与手写批注制造亲和力。Votes: 0GitHub stars: 2