← Back to Skills Marketplace
4713
Downloads
3
Stars
33
Active Installs
1
Versions
Install in OpenClaw
/install web-design
Description
CSS implementation patterns for layout, typography, color, spacing, and responsive design. Complements ui-design (fundamentals) with code-focused examples.
Usage Guidance
This skill appears safe as CSS and web design guidance. Prefer the ClawHub install command or a pinned, reviewed source; only use the GitHub npx install path if you trust that repository and revision.
Capability Analysis
Type: OpenClaw Skill
Name: web-design
Version: 1.0.0
The skill bundle is primarily educational, providing web design patterns and CSS examples. However, the `README.md` file includes an installation instruction `npx add https://github.com/wpank/ai/tree/main/skills/design-systems/web-design`. While `npx add` is a legitimate way to install packages, fetching and executing code directly from a GitHub URL introduces a supply chain risk, as the content at the remote URL could potentially change or be compromised, leading to the execution of arbitrary code. This is a risky capability, though not inherently malicious within the provided files.
Capability Assessment
Purpose & Capability
The artifacts consistently provide CSS layout, typography, color, spacing, responsive design, accessibility, and component styling guidance, matching the stated web-design purpose.
Instruction Scope
Runtime content is educational design guidance and CSS examples; no prompt overrides, hidden agent instructions, data collection, credential handling, or autonomous actions were found.
Install Mechanism
Installation is user-directed. The README includes an unpinned GitHub npx install command and manual copies into Cursor or Claude skill folders, which are disclosed but carry ordinary provenance risk.
Credentials
The bundle contains only README.md and SKILL.md Markdown files, with no executable scripts, binaries, package hooks, network logic, broad filesystem access, or environment variable requirements.
Persistence & Privilege
There is no evidence of background workers, privilege escalation, credential/session use, destructive behavior, or persistence beyond normal user-initiated skill installation.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install web-design - After installation, invoke the skill by name or use
/web-design - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
**Summary: Major rewrite with expanded CSS patterns, practical guidance, and production-focused examples.**
- Rebuilt documentation to provide actionable, code-first patterns for layout, typography, color, spacing, and responsive design.
- Added detailed grids and tables mapping interface needs to recommended CSS tools and code snippets.
- Expanded sections on spacing tokens, color palette structure, visual hierarchy, and accessibility best practices.
- Included responsive fluid techniques, practical examples, and accessibility code that meets modern standards.
- Clarified relationships with related skills: ui-design, frontend-design, and design-system-patterns.
Metadata
Frequently Asked Questions
What is Web Design?
CSS implementation patterns for layout, typography, color, spacing, and responsive design. Complements ui-design (fundamentals) with code-focused examples. It is an AI Agent Skill for Claude Code / OpenClaw, with 4713 downloads so far.
How do I install Web Design?
Run "/install web-design" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Web Design free?
Yes, Web Design is completely free (open-source). You can download, install and use it at no cost.
Which platforms does Web Design support?
Web Design is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Web Design?
It is built and maintained by wpank (@wpank); the current version is v1.0.0.
More Skills