awesome-repositories.com
博客
awesome-repositories.com

通过 AI 驱动的搜索,发现最优秀的开源仓库。

探索精选搜索开源替代品自托管软件博客网站地图
项目关于排名机制媒体报道MCP 服务器
法律隐私政策服务条款
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
rough-stuff avatar

rough-stuff/wired-elements

0
View on GitHub↗
wiredjs.com↗

Wired Elements

Wired-elements 是一个手绘风格的 Web 组件库,提供了一系列用于构建线框图和原型的样式化 HTML 元素。它作为一个线框图 UI 框架,能够以草图般的、手工的审美创建低保真原型。

该库提供了用于手绘 Web 设计和快速 UI 原型制作的组件。这些元素旨在支持低保真线框图绘制,以便在进行高保真开发之前规划用户界面并测试布局。

该项目利用具有 SVG 矢量图形的 Web 组件架构来保持一致的手绘外观。它支持集成到各种 JavaScript 框架中,并利用 CSS 变量来设置线条粗细和颜色的主题。

Features

AI 搜索

探索更多 awesome 仓库

用简单的语言描述您的需求 —— AI 将根据相关性为您从数千个精选开源项目中进行排序。

Start searching with AI
  • Hand-Drawn - Provides a collection of pre-built custom elements with a sketched, hand-drawn appearance for wireframing.
  • SVG-Based Vector Rendering - Uses SVG-based vector graphics to render a consistent hand-drawn aesthetic across various screen sizes.
  • UI Prototyping - Provides tools for rapidly constructing user interface layouts to validate design ideas without polished styling.
  • Wireframing Component Frameworks - Provides a set of interface components specifically designed to create low-fidelity prototypes that look like manual sketches.
  • Wireframing Software - Enables the creation of low-fidelity structural blueprints and sketches to plan user interfaces.
  • Web Component Libraries - Encapsulates styles and behavior within custom HTML elements for framework-agnostic integration into any web project.
  • CSS Variable Theming - Provides a theming system using CSS variables to customize stroke thickness and colors across all components.
  • Shadow DOM Utilities - Uses Shadow DOM to isolate hand-drawn styles and prevent CSS leakage between components and the global scope.
  • Frontend Component Integration - Allows for the rapid integration of pre-styled interface components into web projects to speed up layout prototyping.
  • UI Component Frameworks - Provides a set of pre-built user interface elements that can be integrated into various JavaScript frameworks.
  • Component Libraries - Hand-drawn style UI components.
10,802 星标·338 分支·TypeScript·MIT·3 次浏览

Star 历史

rough-stuff/wired-elements 的 Star 历史图表rough-stuff/wired-elements 的 Star 历史图表

常见问题解答

rough-stuff/wired-elements 是做什么的?

Wired-elements 是一个手绘风格的 Web 组件库,提供了一系列用于构建线框图和原型的样式化 HTML 元素。它作为一个线框图 UI 框架,能够以草图般的、手工的审美创建低保真原型。

rough-stuff/wired-elements 的主要功能有哪些?

rough-stuff/wired-elements 的主要功能包括:Hand-Drawn, SVG-Based Vector Rendering, UI Prototyping, Wireframing Component Frameworks, Wireframing Software, Web Component Libraries, CSS Variable Theming, Shadow DOM Utilities。

rough-stuff/wired-elements 有哪些开源替代品?

rough-stuff/wired-elements 的开源替代品包括: wiredjs/wired-elements — Wired Elements is a hand-drawn web component library and custom element UI kit. It provides a set of low-fidelity… shoelace-style/shoelace — Shoelace is a web component UI library consisting of a suite of accessible, framework-agnostic user interface… franken-ui/ui — This project is a design system toolkit and component library that provides a framework-agnostic approach to building… lukilabs/beautiful-mermaid — This project is a renderer and theme engine for Mermaid.js that converts diagram syntax into styled SVG graphics and… zdhxiong/mdui — mdui is a framework-agnostic UI library and design system based on Material Design 3 standards. It provides a… argyleink/open-props — Open Props is a CSS custom property library and design token set providing reusable variables for colors, typography,…

Wired Elements 的开源替代方案

相似的开源项目,按与 Wired Elements 的功能重合度排序。
  • wiredjs/wired-elementswiredjs 的头像

    wiredjs/wired-elements

    10,800在 GitHub 上查看↗

    Wired Elements is a hand-drawn web component library and custom element UI kit. It provides a set of low-fidelity visual building blocks designed to produce a rough, non-polished aesthetic for early-stage design iterations. The framework enables the creation of rapid UI prototypes, low-fidelity wireframes, and conceptual UX mappings. It uses a sketched appearance to help focus iterations on layout and functionality rather than final visual polish. The library utilizes SVG-based path rendering and web component encapsulation to deliver its hand-drawn style. Visual states are managed through e

    TypeScript
    在 GitHub 上查看↗10,800
  • shoelace-style/shoelaceshoelace-style 的头像

    shoelace-style/shoelace

    13,860在 GitHub 上查看↗

    Shoelace is a web component UI library consisting of a suite of accessible, framework-agnostic user interface elements. It provides a collection of custom element components and reusable HTML tags that encapsulate style and behavior to work across any JavaScript framework or plain HTML pages. The system is designed as a themable UI component system, utilizing CSS variables to manage visual themes and dark mode support. This allows for the implementation of custom design systems and a consistent visual language across web environments. The library covers broader capabilities in accessible int

    TypeScript
    在 GitHub 上查看↗13,860
  • franken-ui/uifranken-ui 的头像

    franken-ui/ui

    2,587在 GitHub 上查看↗

    This project is a design system toolkit and component library that provides a framework-agnostic approach to building web interfaces. It centers on an HTML-first development model, utilizing standard markup and utility-based CSS classes to construct consistent, responsive layouts. The library is built upon the UIkit 3 framework, allowing for the integration of pre-styled interface elements while maintaining control over the underlying markup structure. It further extends these capabilities through web component encapsulation, using custom elements to provide modular and isolated interface log

    TypeScriptcomponentcssdesign-system
    在 GitHub 上查看↗2,587
  • lukilabs/beautiful-mermaidlukilabs 的头像

    lukilabs/beautiful-mermaid

    7,187在 GitHub 上查看↗

    This project is a renderer and theme engine for Mermaid.js that converts diagram syntax into styled SVG graphics and ASCII text. It provides a type-safe diagram editor and a pipeline for transforming diagram source code into scalable vector graphics or plain text visuals. The system features a dedicated theme engine that maps editor colors and CSS variables to diagram elements. It enables dynamic diagram theming through CSS custom properties for real-time color updates and supports index-based styling to override the appearance of specific nodes and edges. The tool covers a range of visualiz

    TypeScript
    在 GitHub 上查看↗7,187
  • 查看 Wired Elements 的所有 30 个替代方案→