MCPcopy
hub / github.com/goabstract/Awesome-Design-Tools

github.com/goabstract/Awesome-Design-Tools @main sqlite

repository ↗ · DeepWiki ↗
46 symbols 89 edges 30 files 0 documented · 0%
README

Awesome Design Tools

Awesome Design Tools as a part of Flawless App family joins Abstract!

Today, we’re excited to announce that Flawless App has joined Abstract, a design delivery platform that brings visibility, accountability, measurability, and predictability to design.

Flawless App was our first company, and we’re proud of everything that we’ve achieved with our 5-person team.

Since 2015, we’ve launched powerful tools for designers and developers — among them are Flawless App, Reduce, Flawless Feedback. We’ve also invested a lot of love and care into community-driven initiatives. Awesome Design Tools is one of them.

So what’s next?

Our team has joined Abstract and is focused on building out the Abstract SDK, bringing developers’ experience forward. One unbelievable journey has finished and the new one has just begun. And if you want to know more about the future of Awesome Design Tools, please keep reading our FAQ.

<a href="https://flawlessapp.io/designtools/joinsabstract">
    <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/awesome-design-tools-joins-abstract-cover.png" alt="Awesome-Design-Tools-Joins-Abstract"/>
</a>

How to Use and Contribute

  • Now you are in the Awesome Design Tools section, if you need plugins — go to Awesome Design Plugins.
  • To find the tool, go through the Table of Contents or search for a keyword (for example, "animation", "prototyping").
  • Ask Lisa on Twitter.

If you found some great design tool or plugin, just send a Pull Request with respect to our Contribution Guidelines (they're very simple, please take a look). Design tools should be submitted here and plugins in Awesome Design Plugins file. We use such labels for free free.svg, open source open-source.svg and Mac only mac.svg tools, don't forget to add them. Now I'd love to see your suggestions!

Table of Content

### Accessibility Tools Accessibility is the practice of creating websites and apps usable for all people, including individuals with visual, motor, auditory, speech, or cognitive disabilities. Here you will find web accessibility tools, accessibility testing tools, and accessibility apps both for developers and designers: - [A11ygator](https://a11ygator.chialab.io) — a web tool to analyze websites against WCAG rules. Also available as Google Chrome browser extension and as Twitter bot. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/chialab/a11ygator-app) - [Accessibility Insights](https://accessibilityinsights.io/) — helps developers quickly find and fix accessibility issues. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Accessible Palette Builder](https://toolness.github.io/accessible-color-matrix/) — an Elm-based prototype to help designers build accessible color palettes. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/toolness/accessible-color-matrix) - [AChecker](https://achecker.ca) — accessibility testing web app used to evaluate HTML content for accessibility problems. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [ANDI](https://www.ssa.gov/accessibility/andi/help/install.html) — accessibility testing tool for web content (bookmarklet). It will automatically detect accessibility issues, give suggestions to improve online accessibility and check 508 compliance. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/SSAgov/ANDI) - [Axe](https://www.deque.com/axe/) — accessibility engine designed to work on all modern browsers and with whatever tools, frameworks, libraries, and environments you use today. It's an automated accessibility testing tool for developers. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://github.com/dequelabs/axe-core) - [ColorBox](http://www.colorbox.io/) — a web app that algorithmically builds accessible color systems. Done by the Lyft Design team. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Colorable](https://colorable.jxnblk.com/) — a free web-based contrast tool. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Color Oracle](https://colororacle.org/) — a free color blindness simulator. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Contrast](https://usecontrast.com/) — a macOS app for designers and developers to get quick access to WCAG color contrast ratios. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Contrast Checker](https://contrast-checker.glitch.me/) — helps check the contrast between the background of an element and the page itself. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Contraste](https://contrasteapp.com/) — an app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG). ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Inclusive Design](https://www.microsoft.com/design/inclusive/) — a methodology and a set of tools provided by the Microsoft team. - [Hex Naw](https://hexnaw.com/) — helps you to test entire color systems for contrast and accessibility. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Leonardo](https://leonardocolor.io) - generate color palettes by desired WCAG contrast ratio. Open source web tool & npm module for designers and engineers. Made by Adobe. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) ![Web](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/web.svg) - [PA11Y](http://pa11y.org/) — accessibility testing tool to find issues with your web pages. It runs HTML CodeSniffer from the command line for programmatic accessibility reporting. It's an accessibility developer tool. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Sim Daltonism](https://michelf.ca/projects/sim-daltonism/) — a color blindness simulator for macOS and iOS that lets you visualize colors as they are perceived with various types of color blindness. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) [![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)](https://www.github.com/michelf/sim-daltonism/) - [Stark](https://getstark.co/) — a paid Sketch plugin that will let you simulate different types of color blindness. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Toptal’s Color Filter](https://www.toptal.com/designers/colorfilter) — lets you test your website and shows you how people with different color blindness will see your pages. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [tota11y](http://khan.github.io/tota11y/) — an accessibility visualization toolkit. Interesting fact: inside the tool name you can see "a11y". It's an abbreviation of accessibility as "a" followed by 11 more letters, followed by "y". ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [WAVE](https://wave.webaim.org/) — allows you to evaluate web content for accessibility issues directly within Chrome and Firefox. It's a web accessibility checker. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [90 Examples](http://clrs.cc/a11y/) — a free collection of accessible color themes. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) Accessibility checking features are also available in VisBug from the [Visual Debugging Tools](https://github.com/LisaDziuba/Awesome-Design-Tools#visual-debugging-tools) category.
### Animation Tools Abstract Animations guide people through the product friendly and smoothly. Live interactive UI makes users feel delighted with instant feedback and emotional touch. These free and paid tools are designed to make animation creation easier. If you plan to make animated transitions, micro-interactions or scroll-based animations, go through these tools: - [After Effects](https://www.adobe.com/products/aftereffects.html) — digital visual effects, motion graphics, and compositing application developed by Adobe. - [BeatFlyer](https://beatflyer.com/) — a web tool that lets you create very quickly loopy and catchy animations from your multi-layer compositions. - [Dokyu Motion](https://3dmybusiness.com) — simplifies motion design in After Effects so any editor can tell stories that won′t be ignored. - [Flare](https://www.2dimensions.com/about-flare) — a powerful design and animation tool, which allows designers and developers to create animations for their app or game. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Flow](https://createwithflow.com/) — a professional animation tool for Sketch designs that also exports production-ready code for iOS, Web or SVG files. ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [GSAP](https://greensock.com/) — a suite of tools for scripted, high-performance HTML5 animations in all major browsers. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Haiku Animator](https://www.haikuforteams.com/) —

Core symbols most depended-on inside this repo

check
called by 13
docs/modules/tweakToolContainer.js
push
called by 10
docs/modules/tweakToolContainer.js
writeHtml
called by 3
index.js
readMd
called by 3
index.js
parseTweaks
called by 3
index.js
sEl
called by 3
docs/js/script.js
getCssFile
called by 2
docs/modules/helpers/getCssFile.js
createLinkForID
called by 2
docs/modules/helpers/createLinkForID.js

Shape

Function 42
Class 2
Method 2

Languages

TypeScript100%

Modules by API surface

docs/modules/tweakToolContainer.js10 symbols
docs/js/script.js10 symbols
index.js3 symbols
docs/modules/view/promotionBanner.js2 symbols
docs/modules/addScripts.js2 symbols
docs/modules/addHeader.js2 symbols
docs/modules/addBackgroundColorToLogo.js2 symbols
docs/server.js1 symbols
docs/modules/tweakDescriptionOfArticleTopic.js1 symbols
docs/modules/removeListInAddendum.js1 symbols
docs/modules/helpers/removeAllImages.js1 symbols
docs/modules/helpers/getCssFile.js1 symbols

Dependencies from manifests, versioned

express4.17.1 · 1×
html-minifier3.5.21 · 1×
i0.3.6 · 1×
jsdom14.1.0 · 1×
markdown-it8.4.2 · 1×
npm6.13.4 · 1×
showdown1.9.1 · 1×
tinycolor21.4.1 · 1×

For agents

$ claude mcp add Awesome-Design-Tools \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact