UX

harmonyos-design

by flyeasy

设计、重构、实现或改进 HarmonyOS、OpenHarmony 与 ArkUI 产品界面。用于从需求建立设计基线，把交互方案落到 ArkTS/ArkUI，处理导航、手机/平板/折叠屏/PC 适配、多输入、状态真实性、生命周期、动效、无障碍、性能、WebView/IME 几何与设备验证。

v0.3.0New
0

Signing

SignedSLSA L2
Signed by
skills-hub.ai distributor
Method
Distributor-signed by skills-hub.aiCryptographically signed by the skills-hub.ai distributor key at publish time.
Signed

Install this skill

Run this command in your terminal. No account required — it auto-detects your AI tool and installs the skill file.

npx @skills-hub-ai/cli install harmonyos-design
Or download directly:
Browse all CLI commands →

Setup by platform

Codex CLI

~/.codex/skills/<skill>/SKILL.md, or reference via codex.md instructions file

Setup guide →

Install

One-click setup for your editor

Run in your project root

npx @skills-hub-ai/cli install harmonyos-design --target claude-code

Examples

Prompt

设计一个适配折叠屏的HarmonyOS界面，确保导航和动效符合用户体验。

Output

首先确认折叠屏的状态权威信息，建立设计基线，定义导航路径和交互方案。使用ArkTS实现界面布局，考虑折叠状态下的屏幕分割和切换动画。验证在不同折叠状态下的UI表现，确保动效流畅且符合平台能力。记录设计方案和验证结果，交由开发团队实现。

Prompt

重构现有HarmonyOS应用的界面，优化性能并增强无障碍支持。

Output

分析现有界面状态和性能瓶颈，建立设计基线，调整ArkUI布局和交互逻辑。引入无障碍元素，确保组件支持辅助功能。验证在不同设备和场景下的表现，确保无障碍和性能指标达标。记录改动和验证证据，交由开发团队落实。

Instructions

This skill doesn’t include stateful context yet, instructions only. Learn about stateful skills.

Security

Loading security scan...

Reviews (0)

View full changelog & diffs →

Related skills

Browse all →
harmonyos-review严格 review、audit、审查、验收或评估 HarmonyOS、OpenHarmony 与 ArkUI 产品、代码、截图、录屏和设备证据。只报告有证据的任务、导航、状态真实性、生命周期、跨设备、多输入、视觉、动效、无障碍与性能问题，并给出最小修复计划和通过结论。0 installsharmonyos-develop实现、重构或诊断 HarmonyOS、OpenHarmony 与 ArkTS 应用功能和工程架构。用于 Ability 与生命周期、状态管理、服务层、权限、网络、存储、数据库、并发、后台任务、ArkWeb、跨进程或跨设备通信、错误恢复以及非纯视觉业务逻辑。0 installsharmonyos-workbench端到端编排 HarmonyOS、OpenHarmony 与 ArkTS/ArkUI 产品开发。用于跨越需求澄清、设计、功能实现、Hvigor 构建、项目级设备或模拟器分配、安装运行、测试、体验审查和 AppGallery 发布门禁的综合任务，也用于用户只说“开发、修复、验证或交付这个 HarmonyOS 项目”而尚未指定阶段时。0 installsharmonyos-targets为 HarmonyOS 项目发现、分配、固定、租赁和验证物理设备及 DevEco 模拟器。用于多项目并行开发、多模拟器管理、稳定选择手机/平板/折叠屏目标、唯一 HDC 端口分配、安装启动、截图、UI 自动化前几何校验和设备争用诊断。0 installsharmonyos-motion把 HarmonyOS、ArkUI、Canvas、WebView 或代码生成产品动效的模糊手感和现象转换为准确术语、相近概念、诊断分支与可能的 ArkUI 能力，例如“松手像急刹车”“滚动后按钮来不及点”“页面像从同一张卡片长出来”“键盘弹出导致远端布局乱跳”。0 installsharmonyos-build构建并校验 HarmonyOS、OpenHarmony 的 HAP 或 APP 产物。用于 Hvigor debug/release 构建、module/product 选择、SDK 与 Hvigor 发现、构建诊断、产物选择、SHA-256 和签名 Profile 事实检查。0 installs

More UX skills

Browse category →
design-claudeHTML-first hi-fi design skill: interactive prototypes, slide decks, animation demos, design variant exploration, visual direction advising, and expert critique. Triggers: make a prototype, design demo, interactive prototype, HTML presentation, animation demo, design variants, hi-fi design, UI mockup, prototype, design exploration, make an HTML page, make a visualization, app prototype, iOS prototype, mobile app mockup, export MP4, export GIF, 60fps video, design style, design direction, design philosophy, color scheme, visual style, recommend style, pick a style, make it look good, review, does this look good, review this design. Core capabilities: Junior Designer workflow (show assumptions+reasoning+placeholders first, then iterate), anti-AI-slop checklist, React+Babel best practices, Tweaks variant switching, Speaker Notes presentation, Starter Components (slide shell/variant canvas/animation engine/device frames), App prototype rules (default real images from Wikimedia/Met/Unsplash,9 installsresponsiveAudit and fix responsive design issues across all breakpoints. Scans for fixed widths that cause mobile overflow, missing media query variants, non-responsive images, undersized touch targets below 48px, unreadable typography, and horizontal scroll violations. Auto-detects framework (Flutter, Tailwind, React, Vue, Angular) and responsive system, then fixes layouts with proper flex/grid, clamp-based fluid typography, responsive image sizing, and adequate touch target spacing. Verifies every screen at mobile (375px), tablet (768px), desktop (1280px), and wide (1920px). Use when you need to fix mobile layout bugs, audit responsive breakpoints, fix overflow issues, ensure touch targets meet accessibility minimums, or verify no horizontal scroll at any viewport width.6 installsdesign-animateAdd purposeful motion to interfaces using modern CSS — scroll-driven animations, view transitions, @starting-style, and GPU-accelerated transforms. Zero JS animation libraries needed. Supports web and Flutter. Use when: 'add animation', 'animate', 'add motion', 'transitions', 'scroll animation', 'page transitions', 'loading animation', 'micro-interactions'.6 installsdesign-systemExtract and formalize a design system from existing UI code. Scans for every hardcoded color, font size, spacing value, border radius, and shadow across the codebase, deduplicates near-identical values, generates framework-appropriate tokens (CSS custom properties, Tailwind config, Flutter ThemeData, SCSS variables), builds a component inventory with token coverage ratings, and replaces all hardcoded values with token references. Use when you need to create design tokens, consolidate inconsistent styles, audit component consistency, replace magic numbers with named values, or set up a shared design language across a project.6 installsdesign-auditComprehensive autonomous design quality audit across accessibility (WCAG 2.2), performance, theming, responsive/adaptive design, and anti-pattern detection. Produces a prioritized report with severity ratings and fix recommendations. Use when: 'audit design', 'check accessibility', 'a11y audit', 'design review', 'UI quality check', 'WCAG audit', 'design quality'.5 installsuxDual-mode UX quality skill — runs a heuristic/accessibility/motion audit on the current codebase, or validates implementation against design mockups. Fixes all issues found and commits.5 installs

Frequently asked questions about harmonyos-design

What does the harmonyos-design skill do?

设计、重构、实现或改进 HarmonyOS、OpenHarmony 与 ArkUI 产品界面。用于从需求建立设计基线，把交互方案落到 ArkTS/ArkUI，处理导航、手机/平板/折叠屏/PC 适配、多输入、状态真实性、生命周期、动效、无障碍、性能、WebView/IME 几何与设备验证。 It's a reusable SKILL.md instruction set that loads into your AI coding assistant on demand, no prompt engineering, no copy-pasting every session.

How do I install the harmonyos-design skill?

Run `npx @skills-hub-ai/cli install harmonyos-design` from your terminal. The CLI writes the SKILL.md to the correct location for your AI tool (e.g. ~/.claude/skills/harmonyos-design/ for Claude Code or ~/.cursor/skills/ for Cursor with --target cursor) and adds it to your project's .skills.json lockfile.

Which AI tools does harmonyos-design work with?

harmonyos-design runs in Codex CLI. It follows the open Agent Skills standard (SKILL.md), so the same skill works in every supported tool without modification.

Is the harmonyos-design skill free?

Yes. Every skill on skills-hub.ai is free and open-source. There are no premium tiers, paywalls, or usage limits. You only pay for whatever AI assistant you're already using.

How do I use harmonyos-design after installing it?

In Codex CLI, type `/harmonyos-design` (or whatever slash command the skill registers) and the AI follows the skill's instructions immediately. You can also reference it by name in natural language, your AI loads the skill into context when relevant.

Can I share the harmonyos-design skill with my team?

Yes. Commit your project's .skills.json lockfile and teammates run `npx @skills-hub-ai/cli install` (no args) to install every skill at the exact version you pinned. Organization-scoped installs work via skills-hub.ai organizations.