Currently this concept is part of a personal experiment by Samir Dash

7 July 2016

Cloud based “Design Style Guide Document” Automation

is a cloud based 100% automated visual design style guide creator

that allows to come up with very detailed style-guide and design-specs document based on uploaded mock-up by the user.

The user can upload  Adobe Photoshop (  PSD), Adobe Illustrator (.AI), or PDF formatted exported from any design tool (Corel draw, Paint etc.) and within minutes Specstra can generate style guide which other wise would have taken the user days to complete and that with prone to error.

What is Specstra?

Tedious process

Lots of manual work no creativity – draftsman-ship work is not fun for designer.

Time & effort consuming activity

Not scalable there is limit to how much a single designer can do

Comes with cost Creative guys are paid to do these non-creative tings – however charges remain the same.

Threat to agile projects last moment changes in design can impact the software delivery

Pain-points of manual approach of style-guide or a specs document creation

Completely Cloud based no software to installNot restricted to Adobe software solutioncan support non adobe softwareMinimal user intervention is workflowdesign automation is possibleQuick to Delivery Reduces the designer time to delivery by 99% or more.Saves $$$$ Saves money by 50% or more. Supports creativity Designer can save more time for creative stuffs and is saved from draftsman-ship.Multi-language supporthelps in global team Supports Agile SDLCQuick iterations and design changes will not delay the time to development as style guide can be ready in a few minutes. One click User Experience One click GUI guide makes the workflow super easy.Automatically handles multiple device resolutions and screen densities. Scalable for any volume of works. No need to pay to reserve people for the work .

Why Specstra?

Overviewof Features

Localization:Korean, Hindi, Spanish, French, Chinese, Arabic etc.

Detailed Report:Font, Shape, Color, Grid, Absolute, Relative positioning. In every iteration the report is complete in all respect.

Customized report builder:Editor to add and remove details, renaming etc.

Multi Design file support:Outputs from Photoshop, Illustrator, Corel Draw, In-Design, Gem to be supported.

Super easy to use dashboard:Dashboard that is easy to use and aligns with the design workflow.

5-10 minutes delivery :All reports will be generated in 5-10 minutes of upload

On demand premises hosting:For confidentiality the customer can order on premises hosting on-demand.

Feature #1Complete details of the objects

• Supports text/font, shape, image objects

• Resolution dependent (Screen Pixel) units

• Resolution independent (Point) units (Auto

conversion based on target pixel density of the

device ) – example iOS Retina, Non-Retina,

Android (LDPI, MDPI, HDPI, XHDPI, XXHDPI,

XXXHDPI etc. ), PC Screen standard web

resolution etc.

• Font formatting information – size , family, style,

color,

Feature #2Complete details of color, shapes, images & font

• Supports text/font, shape, image objects

• Font formatting information – size , family, style, color,

• Web safe / Non-web safe color analysis

Feature #3Complete details of the objects

• Grid analysis report for shapes, images & text

Feature #4Absolute positioning details

• Provides absolute position of the objects and draws the red lines.

Feature #5Relative positioning details

• Provides relative position of the objects and draws the red lines.

It automatically detects the enveloping objects and calculates the

relative distance etc.

Feature #6Multi-language support

• Style guide can be generated in multiple languages like Korean,

Hindi, German, Spanish, Chinese, Arabic etc.

*NOT IMPLEMENTED IN POC

Feature #7Assets/Design Element Export as CSS, Images etc.*NOT IMPLEMENTED IN POC

• Associated assets can be exported automatically

• Raster as well as resolution independent assets like vectors

• CSS styles exported for font & shape objects

Feature #8Optional Interactive UI allows user to point and inspect

• Additionally Specstra provides an interactive UI for the user to

select the design element in runtime and get the details.

*NOT IMPLEMENTED IN POC

is in early stage POC The current core engine of the POC that crunches hundreds of MBs of design files to generate the style guide is in a very early prototype stage.

The POC uses PHP, MySQL, Shell-Script, Python, Ghost script and some open-source libraries. Also it implements a assembly line architecture to reliably work on few GBs of design files without crashing the server.

Attached is a PDF formatted style guide generated from the current POC

POC the proof!

Thank You!