1.
Currently this concept is part of a personal experiment by Samir Dash
7 July 2016
Cloud based “Design Style Guide Document” Automation

2.
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?

3.
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

4.
Completely Cloud based
no software to install
Not restricted to Adobe software solution
can support non adobe software
Minimal user intervention is workflow
design automation is possible
Quick 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 support
helps in global team
Supports Agile SDLC
Quick 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?

5.
Overview
of 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.

6.
Feature #1
Complete
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,

7.
Feature #2
Complete
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

8.
Feature #3
Complete
details of the
objects
• Grid analysis report for shapes, images & text

9.
Feature #4
Absolute
positioning
details
• Provides absolute position of the objects and draws the red lines.

10.
Feature #5
Relative
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.

11.
Feature #6
Multi-
language
support
• Style guide can be generated in multiple languages like Korean,
Hindi, German, Spanish, Chinese, Arabic etc.
*NOT IMPLEMENTED IN POC

12.
Feature #7
Assets/Desig
n 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

13.
Feature #8
Optional
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

14.
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!

15.
Thank You!