← Back to Skills Marketplace
Markdown-UI DSL: Zero-Hallucination UI Generation
by
MegaByteMark
· GitHub ↗
· v1.0.3
· MIT-0
330
Downloads
0
Stars
0
Active Installs
4
Versions
Install in OpenClaw
/install markdown-ui-dsl
Description
Create low-fidelity, text-based wireframes using the Markdown-UI Domain Specific Language (DSL).
Usage Guidance
This skill is internally consistent but will read and (if authorized) modify local project files based on paths in .ui.md frontmatter or code comments. Before running it against important repositories: (1) back up your code or use a branch, (2) avoid giving a blanket 'autonomously' instruction unless you trust the exact action, and (3) test on a small sample project so you can inspect the generated code headers and changes. Because it's instruction-only and from an unknown source, prefer to run it in a sandboxed environment until you're comfortable with its behavior.
Capability Analysis
Type: OpenClaw Skill
Name: markdown-ui-dsl
Version: 1.0.3
The skill defines a Markdown-based UI DSL and includes instructions for an AI agent to synchronize design specs with source code files. A significant security concern is the 'Auto-Synchronization' feature in SKILL.md, which explicitly allows the agent to bypass user confirmation for file modifications if certain keywords (e.g., 'force sync' or 'autonomous') are present in the prompt. While intended for automation, this capability could be exploited via prompt injection to overwrite arbitrary files defined in the YAML metadata or code comments, posing a risk of data loss or unauthorized code modification.
Capability Assessment
Purpose & Capability
Name/description (Markdown-UI DSL for low-fidelity wireframes) align with the SKILL.md: the document defines a DSL and explicit rules for generating/parsing .ui.md specs and translating them to/from frontend components. Required binaries/env/config are none, which is appropriate for an instruction-only DSL authoring skill.
Instruction Scope
The instructions explicitly direct the agent to read and (when authorized) modify code files based on a 'component:' YAML path and to look for a '// UI Spec:' comment in code. This is within scope for a spec->code syncer, but users should note the skill will access the local filesystem and modify project files. The SKILL.md includes a safety rule to ask for confirmation before changes unless the user explicitly requests 'autonomously' or 'force sync', which is a notable behavior to be aware of.
Install Mechanism
No install spec or code files are included; this is instruction-only so nothing is downloaded or written by the skill package itself.
Credentials
The skill requires no environment variables or credentials. It does instruct the agent to read and write local project files (paths from frontmatter or code comments), which is proportional to the stated purpose of syncing specs and code.
Persistence & Privilege
The skill is not marked 'always:true' and does not request elevated or cross-skill configuration. The platform default allowing autonomous invocation applies (normal), and the SKILL.md permits bypassing user confirmation only if the user explicitly tells the agent to operate 'autonomously' or 'force sync'.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install markdown-ui-dsl - After installation, invoke the skill by name or use
/markdown-ui-dsl - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.3
Responsive design support added with new breakpoint-based directives.
- Introduced **responsive directives** using blockquotes prefixed with `@<breakpoint>` (e.g., `> @md gap: 4`), enabling mobile-first, breakpoint-scoped design tokens for layouts and components.
- Responsive directives are layered additively and mapped to framework-specific outputs using the active design system.
- Regular blockquote hints for alignment and spacing remain unchanged and distinct from responsive directives.
- Version bump to 1.0.3.
v1.0.2
- Added `name`, `description`, `license`, `metadata`, and `author`/`version` frontmatter to the skill definition to meet agent skills spec requirements.
- No changes to core functionality or instructions; the skill logic and DSL specification remain the same.
v1.0.1
**Adds confirmation and safety checks before code/wireframe syncs.**
- Introduced a security rule requiring explicit user confirmation before modifying or overwriting code or wireframes during synchronization, unless the user requests autonomous operation.
- Clarified sync steps: now always asks which file is the source of truth if drift is detected, unless working autonomously.
- Updated sync file locating behavior to use only the indicated file paths or comments for code/wireframe linking.
- Added safety: in autonomous mode and if unsure, the sync will halt and warn the user rather than making destructive changes.
v1.0.0
v1.0.0 - Initial Release
Introducing the Markdown-UI DSL! A text-based, intermediate wireframing language designed to eliminate LLM layout hallucinations.
Core Features included in this release:
Visual Syntax Definitions: Maps ||| COLUMN |||, === ROW ===, and ::: CARD ::: deterministically to Flex/Grid layouts.
True Framework Agnosticism: Prompts the agent to map standard UI tokens to React, Flutter, Blazor, or any target specified.
Two-Way Binding Protocol: Instructs agents to keep your .ui.md spec and your generated code component perfectly synchronized when humans or AI edit either file.
Agent Directives: Support for standard Markdown blockquotes (> align right) to pass natural language layout hints without breaking structural parser rules.
View setup instructions and cross-platform design-system examples on our GitHub Repository (https://github.com/MegaByteMark/markdown-ui-dsl).
Metadata
Frequently Asked Questions
What is Markdown-UI DSL: Zero-Hallucination UI Generation?
Create low-fidelity, text-based wireframes using the Markdown-UI Domain Specific Language (DSL). It is an AI Agent Skill for Claude Code / OpenClaw, with 330 downloads so far.
How do I install Markdown-UI DSL: Zero-Hallucination UI Generation?
Run "/install markdown-ui-dsl" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Markdown-UI DSL: Zero-Hallucination UI Generation free?
Yes, Markdown-UI DSL: Zero-Hallucination UI Generation is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does Markdown-UI DSL: Zero-Hallucination UI Generation support?
Markdown-UI DSL: Zero-Hallucination UI Generation is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Markdown-UI DSL: Zero-Hallucination UI Generation?
It is built and maintained by MegaByteMark (@megabytemark); the current version is v1.0.3.
More Skills