harmonyos-design

by flyeasy

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

v0.4.04 installs

Unsigned, install at your own risk

Unverified

This skill has no cryptographic signature attached. We can't verify the contents match what the publisher intended.

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 →

Browse all →

harmonyos-review严格 review、audit、审查、验收或评估 HarmonyOS、OpenHarmony 与 ArkUI 产品、代码、截图、录屏和设备证据。只报告有证据的任务、导航、状态真实性、生命周期、跨设备、多输入、视觉、动效、无障碍与性能问题，并给出最小修复计划和通过结论。0 installs harmonyos-workbench端到端编排 HarmonyOS、OpenHarmony 与 ArkTS/ArkUI 产品开发。用于跨越需求澄清、设计、开放能力/权益/ACL、AI 方案、功能实现、Hvigor 构建、项目级设备或模拟器分配、安装运行、测试、体验审查和 AppGallery 发布门禁的综合任务，也用于用户尚未指定阶段的 HarmonyOS 开发、修复、验证或交付任务。0 installs harmonyos-develop实现、重构或诊断 HarmonyOS、OpenHarmony 与 ArkTS 应用功能和工程架构。用于 Ability 与生命周期、状态管理、服务层、权限实现、网络、存储、数据库、并发、后台任务、ArkWeb、跨进程或跨设备通信和错误恢复。开放能力/权益/ACL 选择与开通使用 harmonyos-capabilities；AI 架构使用 harmonyos-ai。0 installs harmonyos-motion把 HarmonyOS、ArkUI、Canvas、WebView 或代码生成产品动效的模糊手感和现象转换为准确术语、相近概念、诊断分支与可能的 ArkUI 能力，例如“松手像急刹车”“滚动后按钮来不及点”“页面像从同一张卡片长出来”“键盘弹出导致远端布局乱跳”。0 installs harmonyos-targets为 HarmonyOS 项目发现、分配、固定、租赁和验证物理设备及 DevEco 模拟器。用于多项目并行开发、多模拟器管理、稳定选择手机/平板/折叠屏目标、唯一 HDC 端口分配、安装启动、截图、UI 自动化前几何校验和设备争用诊断。0 installs harmonyos-ai规划、实现、诊断或验证 HarmonyOS AI 产品与工程能力。用于小艺 Skill 与 Agent、Agent Framework Kit、端侧 A2A、Intents Kit、Core Speech/Core Vision/Natural Language/Speech/Vision Kit、CANN、MindSpore Lite、Neural Network Runtime、端侧模型、云侧大模型、RAG、AI 问答联网增强、AI 数据/隐私/安全与效果评测。开放能力开通、权益、ACL 和资格先使用 harmonyos-capabilities。0 installs

More UX skills

Browse category →

design-animateAdd purposeful motion to interfaces using modern CSS — scroll-driven animations, view transitions, @starting-style, and GPU-accelerated transforms. Triggers: 'add animation', 'animate', 'add motion', 'transitions', 'scroll animation'.23 installs 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.22 installs design-polishFinal autonomous quality pass before shipping. Fixes alignment, spacing, consistency, typography hierarchy, color harmony, motion timing, and every micro-detail that separates good from great..20 installs responsiveAudit 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..19 installs design-auditComprehensive autonomous design quality audit across accessibility (WCAG 2.2), performance, theming, responsive/adaptive design, and anti-pattern detection. Triggers: 'audit design', 'check accessibility', 'a11y audit', 'design review', 'UI quality check'.18 installs design-syncOrchestrates the Claude Design ↔ Claude Code /design-sync handoff loop — imports your design system into the active project, validates generated UI components against design tokens, and round-trips edits back to Claude Design so prototypes always start from real components rather than approximations.11 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.